{"componentChunkName":"component---src-templates-post-js","path":"/blog/workpad-part-8","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","tips":[],"categories":["webide"],"datetime":"2022-01-05 14:18:21","noFooter":false,"description":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。","plainTextDescription":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/9679e/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/82675/WorkPad-demo.png 500w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/fef60/WorkPad-demo.png 1000w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/9679e/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c76f/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/7fe04/WorkPad-demo.webp 500w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/d619e/WorkPad-demo.webp 1000w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c76f/WorkPad-demo.webp 1374w","sizes":"(max-width: 1374px) 100vw, 1374px"}}},"bannerCredit":null,"slug":"/blog/workpad-part-8","tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"]},"headings":[{"value":"〇、先捋一捋","depth":2},{"value":"一、vscode-textmate 和 oniguruma","depth":2},{"value":"oniguruma / vscode-oniguruma","depth":3},{"value":"vscode-textmate","depth":3},{"value":"二、需要提前了解的点","depth":2},{"value":"三、手把手的实现 monaco-editor 中新的高亮逻辑扩展","depth":2},{"value":"1. 编辑器加载","depth":3},{"value":"2. 编辑器初始化","depth":3},{"value":"3. 准备好 Oniguruma ASM 并初始化一个 OnigasmLib","depth":3},{"value":"4. 准备好 textmate 需要用到的主题样式","depth":3},{"value":"5. 准备好 textmate 需要用到的语法文件","depth":3},{"value":"6. 开启语言支持","depth":3},{"value":"四、抽象和批量的添加语言","depth":2},{"value":"五、自己添加语法","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"workpad-part-8\",\n \"date\": \"2022-01-05 14:18:21\",\n \"title\": \"🌋 WebIDE 的开发记录其八（Textmate详解）\",\n \"author\": \"Ubug\",\n \"description\": \"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。\",\n \"series\": \"WebIDE 的开发记录\",\n \"categories\": [\"webide\"],\n \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"Textmate\"],\n \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u8FD9\\u7BC7\\u6587\\u7AE0\\u5206\\u4EAB\\u7684\\u662F\\u66F4\\u8BE6\\u7EC6\\u4E00\\u6B65\\u6B65\\u7684\\u5B9E\\u73B0 VSCode \\u7684 textmate\\uFF0C\\u5E76\\u4E14\\u89E3\\u91CA\\u4E00\\u4E9B\\u4E3A\\u4EC0\\u4E48\\uFF0C\\u6700\\u540E\\u624B\\u52A8\\u5F15\\u5165\\u65B0\\u7684\\u9AD8\\u4EAE\\u903B\\u8F91\\u3002\"), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u4E0A\\u4E00\\u7BC7\\u76F8\\u5173\\u6587\\u7AE0\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-5\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E94\\uFF08monaco-editor + textmate\\uFF09\"))), mdx(\"p\", null, \"WorkPad \\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u6709\\u610F\\u601D\\u7684\\u9879\\u76EE\\uFF0C\\u4E4B\\u524D\\u62B1\\u7740\\u5206\\u4EAB\\u601D\\u8DEF\\u7684\\u60F3\\u6CD5\\uFF0C\\u7528\\u5F88\\u7B80\\u7565\\u7684\\u6587\\u7AE0\\u8BF4\\u4E86\\u4E0B\\u91CD\\u70B9\\uFF0C\\u4E4B\\u540E\\u975E\\u5E38\\u591A\\u7684\\u4EBA\\u6765\\u8BE2\\u95EE Textmate\\u3001LSP \\u7B49\\u95EE\\u9898\\uFF0C\\u540E\\u9762\\u7528\\u51E0\\u7BC7\\u6587\\u7AE0\\u518D\\u591A\\u8BF4\\u4E00\\u4E9B\\u3002\\u672C\\u6587\\u4E3A\\u7B2C\\u516B\\u7BC7\\u6587\\u7AE0\\uFF0C\\u66F4\\u8BE6\\u7EC6\\u6DF1\\u5165\\u8C08\\u8C08 Textmate \\u7684\\u9AD8\\u4EAE\\u548C\\u6269\\u5C55\\u3002\"), mdx(\"h2\", null, \"\\u3007\\u3001\\u5148\\u634B\\u4E00\\u634B\"), mdx(\"p\", null, \"\\u9700\\u8981\\u5148\\u660E\\u786E\\u7684\\u51E0\\u4E2A\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u9AD8\\u4EAE\\u7684\\u672C\\u8D28\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5BF9\\u6587\\u672C\\u4E2D\\u7684\\u53D8\\u91CF\\u3001\\u6CE8\\u91CA\\u3001\\u5B57\\u7B26\\u4E32\\u3001\\u51FD\\u6570\\u3001\\u4FDD\\u7559\\u5173\\u952E\\u5B57\\u7B49\\u8FDB\\u884C\\u4E0D\\u540C\\u7684\\u6837\\u5F0F\\u7740\\u8272\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E0D\\u540C\\u7684\\u9AD8\\u4EAE\\u7684\\u533A\\u522B\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u8BCD\\u6CD5\\u3001\\u8BED\\u6CD5\\u5206\\u6790\\u903B\\u8F91\\u4E0D\\u540C\\uFF0C\\u540C\\u6837\\u4E00\\u4E2A\\u5B57\\u7B26\\u4E32\\u88AB\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\u5668\\u5206\\u6790\\u51FA\\u6765\\u662F\\u51FD\\u6570\\u8FD8\\u662F\\u53D8\\u91CF\\u53EF\\u80FD\\u4E0D\\u540C\\uFF0C\\u6709\\u4E9B\\u7528\\u7EAF\\u6B63\\u5219\\u6765\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u589E\\u52A0\\u4E86\\u903B\\u8F91\\u4E4B\\u7C7B\\u7684\\uFF0C\\u6709\\u4E9B\\u53EA\\u80FD\\u4E00\\u884C\\u4E00\\u884C\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u80FD\\u591A\\u884C\\u5339\\u914D\\uFF0C\\u6709\\u4E9B\\u652F\\u6301\\u5D4C\\u5957\\uFF0C\\u6709\\u4E9B\\u4E0D\\u652F\\u6301\\uFF0C\\u89E3\\u6790\\u51FA\\u6765\\u7684\\u7ED3\\u679C\\u4E5F\\u5404\\u6210\\u4F53\\u7CFB\\uFF0C\\u5176\\u4E2D\\u4F7F\\u7528\\u6700\\u5E7F\\u6CDB\\u901A\\u7528\\u7684\\u5C31\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"textmate\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u9AD8\\u4EAE\\u4E3A\\u4EC0\\u4E48\\u548C\\u8BED\\u6CD5\\u89E3\\u6790\\u6709\\u5173\\u7CFB\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E00\\u822C\\u6765\\u8BF4\\u8BED\\u6CD5\\u5206\\u6790\\u5668\\u80FD\\u5206\\u6790\\u51FA\\u4E0D\\u540C\\u7684 token\\uFF0C\\u8FD9\\u4E2A token \\u5C31\\u662F\\u62BD\\u8C61\\u51FA\\u6765\\u4E0E\\u8BED\\u8A00\\u65E0\\u5173\\u7684\\u6807\\u8BB0\\uFF0C\\u6BD4\\u5982\\uFF1A\\u5173\\u952E\\u5B57\\u3001\\u6CE8\\u91CA\\u3001\\u5B57\\u7B26\\u4E32\\u7B49\\uFF0C\\u6BCF\\u4E2A token \\u6709\\u4E0D\\u540C\\u7684\\u7740\\u8272\\u903B\\u8F91\\uFF0C\\u989C\\u8272\\u3001\\u80CC\\u666F\\u3001\\u659C\\u4F53\\u3001\\u7C97\\u7EC6\\u7B49\\u3002\"), mdx(\"blockquote\", {\n parentName: \"li\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u8FD9\\u4E2A\\u548C\\u6700\\u8FD1\\u6837\\u5F0F\\u5E93\\u4E2D\\u5F88\\u706B\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Design Tokens\"), \" \\u6982\\u5FF5\\u672C\\u8D28\\u4E0A\\u662F\\u4E00\\u4E2A\\u610F\\u601D\\uFF0C\\u90FD\\u662F\\u7EDF\\u4E00\\u9884\\u8BBE\\u7684\\u57FA\\u7840\\u6837\\u5F0F\\u6807\\u8BB0\\u3002\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u81EA\\u5E26\\u9ED8\\u8BA4\\u7684 token \\u89E3\\u6790\\u5668\\u89E3\\u6790\\u51FA\\uFF1A\"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-yaml\"\n }, \"identifier operators keyword\\nconstant entity tag\\ninfo-token warn-token error-token\\ndebug-token regexp attribute\\nconstructor namespace type\\npredefined invalid\\n\\nstring .[escape]\\ncomment .[doc]\\ndelimiter .[curly, square, parenthesis, angle, array, bracket]\\nnumber .[hex, octal, binary, float]\\nvariable .[name, value]\\nmeta .[content]\\n\")), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u81EA\\u5E26\\u4E3B\\u9898\\u5B9A\\u4E49 token \\u7684\\u6837\\u5F0F\\uFF1A\"), mdx(\"pre\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u5B9A\\u4E49 theme \\u7684\\u65B9\\u6CD5\\nmonaco.editor.defineTheme('myCustomTheme', {\\n base: 'vs', // can also be vs-dark or hc-black\\n inherit: true, // can also be false to completely replace the builtin rules\\n rules: [\\n { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },\\n { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },\\n { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above\\n ],\\n colors: {\\n 'editor.foreground': '#000000'\\n }\\n});\\n\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E3A\\u4EC0\\u4E48 monaco \\u80FD\\u591F\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\uFF1F\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"monaco \\u867D\\u7136\\u5185\\u7F6E\\u7684\\u662F\\u56FA\\u5B9A\\u7684\\u4E00\\u4E2A token \\u89E3\\u6790\\u5668 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Monarch\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u5411\\u5916\\u63D0\\u4F9B\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.languages.setTokensProvider\"), \" \\u8BA9\\u5916\\u754C\\u5B9A\\u4E49 token\\uFF0C\\u4E3B\\u9898\\u90E8\\u5206\\u4E5F\\u5E76\\u6CA1\\u6709\\u9650\\u5236 token \\u7684\\u96C6\\u5408\\uFF0C\\u6240\\u4EE5\\u4E5F\\u8BA9\\u6211\\u4EEC\\u79FB\\u690D textmate \\u8BED\\u6CD5\\u548C\\u4E3B\\u9898\\u6210\\u4E3A\\u53EF\\u80FD\\u3002\"), mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u4E5F\\u5C31\\u662F\\u53EF\\u4EE5\\u8BA9\\u6211\\u4EEC\\u89E3\\u6790\\u51FA token\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u8BA9\\u6211\\u4EEC\\u81EA\\u5B9A\\u4E49 token \\u7684\\u6837\\u5F0F\\uFF0C\\u867D\\u7136\\u5F88\\u6709\\u9650\\u4F46\\u662F\\u591F\\u7528\\u3002\"))), mdx(\"h2\", null, \"\\u4E00\\u3001\", mdx(\"inlineCode\", {\n parentName: \"h2\"\n }, \"vscode-textmate\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"h2\"\n }, \"oniguruma\")), mdx(\"p\", null, \"\\u662F\\u4EC0\\u4E48\\u3001\\u4E3A\\u4EC0\\u4E48\\u9700\\u8981\\u3001\\u4EE5\\u53CA\\u626E\\u6F14\\u4E86\\u4EC0\\u4E48\\u89D2\\u8272\\uFF1F\"), mdx(\"h3\", null, mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"oniguruma\"), \" / \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"vscode-oniguruma\")), mdx(\"p\", null, \"TextMate \\u8BED\\u6CD5\\u4F7F\\u7528\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u89E3\\u6790 token\\uFF0C\\u4F46\\u662F js \\u7684\\u6B63\\u5219\\u5F15\\u64CE\\u4E0E textmate \\u6240\\u4F7F\\u7528\\u7684 oniguruma \\u4E0D\\u540C\\uFF0C\\u6709\\u5F88\\u591A\\u7279\\u6027\\u5DEE\\u5F02\\uFF08JS \\u4E0D\\u652F\\u6301 textmate \\u4E2D\\u4F7F\\u7528\\u5F88\\u591A\\u7684\\u540E\\u884C\\u65AD\\u8A00 lookbehind\\uFF09\\uFF0C\\u4E3A\\u4E86\\u4E00\\u81F4\\u6027\\u548C\\u529F\\u80FD\\u5B8C\\u6574\\u7B49\\u539F\\u56E0\\uFF0C\\u6709\\u5FC5\\u8981\\u4F7F\\u7528\\u539F\\u7248\\u7684 oniguruma \\u6A21\\u5757\\u6765\\u5B9E\\u73B0\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\u89E3\\u6790\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F oniguruma \\u662F\\u4E2A c++ \\u6A21\\u5757\\uFF0C\\u5728\\u5404\\u79CD\\u8DE8\\u5E73\\u53F0\\u7684\\u5BA2\\u6237\\u7AEF\\u4E2D\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F js \\u73AF\\u5883\\u4E2D\\u53EA\\u80FD\\u7528 wasm \\u6765\\u9000\\u800C\\u6C42\\u5176\\u6B21\\u4E86\\uFF0C\\u5177\\u4F53\\u5386\\u53F2\\u4EC0\\u4E48\\u7684\\u53EF\\u4EE5\\u770B\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-5\"\n }, \"\\u4E4B\\u524D\\u7684\\u6587\\u7AE0\"), \"\\u3002\"), mdx(\"h3\", null, mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"vscode-textmate\")), mdx(\"p\", null, \"\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u4E00\\u4E2A textmate \\u8FD0\\u884C\\u903B\\u8F91\\uFF0C\\u8D1F\\u8D23\\u52A0\\u8F7D\\u3001\\u8FD0\\u884C\\u3001\\u7BA1\\u7406 textmate \\u7684\\u89E3\\u6790\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u975E\\u5E38\\u7B80\\u7565\\u7684\\u52A0\\u8F7D\\u548C\\u8FD0\\u884C\\u903B\\u8F91\\u90E8\\u5206\\uFF08\\u5B98\\u65B9\\u4F7F\\u7528 demo \\u6F14\\u793A\\uFF09\\nconst { loadWASM, createOnigScanner, createOnigString } = require('vscode-oniguruma')\\n\\n// oniguruma \\u7684\\u52A0\\u8F7D\\u548C\\u5C01\\u88C5\\nconst wasmBin = fs.readFileSync('path/onig.wasm')).buffer;\\nconst vscodeOnigurumaLib = loadWASM(wasmBin).then(() => ({\\n createOnigScanner,\\n createOnigString\\n}));\\n\\n// -> source.js \\u662F textmate \\u4E2D js \\u7684 scopeName\\uFF0C\\u7B97\\u662F\\u552F\\u4E00\\u6807\\u8BC6 id\\n\\nconst vsctm = require('vscode-textmate');\\n// \\u521B\\u5EFA textmate \\u7684\\u6CE8\\u518C\\u673A\\u6765\\u7BA1\\u7406\\u6574\\u4E2A\\u7684\\u8BED\\u6CD5\\u52A0\\u8F7D\\u548C\\u89E3\\u6790\\nconst registry = new vsctm.Registry({\\n onigLib: vscodeOnigurumaLib,\\n loadGrammar: (scopeName) => {\\n if (scopeName === 'source.js') {\\n // https://github.com/textmate/javascript.tmbundle/blob/master/Syntaxes/JavaScript.plist\\n return readFile('./JavaScript.plist').then(data => vsctm.parseRawGrammar(data.toString()))\\n }\\n console.log(`Unknown scope name: ${scopeName}`);\\n return null;\\n }\\n});\\n// \\u52A0\\u8F7D js \\u7684\\u8BED\\u6CD5\\u6587\\u4EF6\\u5E76\\u89E3\\u6790\\nawait registry.loadGrammar('source.js')\\n\\n// \\u89E3\\u6790\\u7EC6\\u8282\\nconst text = [\\n `function sayHello(name) {`,\\n `\\\\treturn \\\"Hello, \\\" + name;`,\\n `}`\\n];\\nlet ruleStack = vsctm.INITIAL;\\nfor (let i = 0; i < text.length; i++) {\\n const line = text[i];\\n const lineTokens = grammar.tokenizeLine(line, ruleStack);\\n console.log(`\\\\nTokenizing line: ${line}`);\\n for (let j = 0; j < lineTokens.tokens.length; j++) {\\n const token = lineTokens.tokens[j];\\n console.log(` - token from ${token.startIndex} to ${token.endIndex} ` +\\n `(${line.substring(token.startIndex, token.endIndex)}) ` +\\n `with scopes ${token.scopes.join(', ')}`\\n );\\n }\\n ruleStack = lineTokens.ruleStack;\\n}\\n// \\u8F93\\u51FA\\u6BCF\\u4E00\\u884C\\u7684\\u6BCF\\u4E2A\\u5173\\u952E\\u903B\\u8F91\\u7684 token \\u7ED3\\u679C\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4E0A\\u9762\\u8FD9\\u4E24\\u4E2A\\u90E8\\u5206\\u662F monaco-editor \\u80FD\\u591F\\u5B9E\\u73B0 textmate \\u7684\\u5173\\u952E\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u9700\\u8981\\u63D0\\u524D\\u4E86\\u89E3\\u7684\\u70B9\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u867D\\u7136\\u6709\\u5F88\\u591A\\u6210\\u719F\\u7684\\u5728\\u7EBF\\u7F16\\u8F91\\u5668\\u90FD\\u505A\\u8FC7\\u4E86\\uFF0C\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u524D\\u4EBA\\u683D\\u6811\\u73AF\\u8282\\u4E5F\\u8BF4\\u4E86\\u975E\\u5E38\\u591A\\uFF0C\\u57FA\\u672C\\u4E0A\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"oniguruma\"), \" \\u8FD9\\u4E24\\u4E2A\\u4F9D\\u8D56\\u7684\\u7EC4\\u5408\\u6216\\u9B54\\u6539\\uFF0Cvscode \\u76EE\\u524D\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-oniguruma\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u7248\\u672C\\u5DF2\\u7ECF\\u8FED\\u4EE3\\u4E86\\u5F88\\u591A\\u7248\\u672C\\uFF0C\\u4F46\\u662F\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"5.0\"), \"\\u7684\\u7248\\u672C\\u5F15\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"oniguruma\"), \" \\u7684\\u4E00\\u4E9B \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"breaking change\"), \" \\u5BFC\\u81F4\\u4E4B\\u524D\\u7684\\u903B\\u8F91\\u6CA1\\u6CD5\\u76F4\\u63A5\\u7528\\u4E86\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u9700\\u8981\\u624B\\u52A8\\u5F15\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"4.x\"), \" \\u7248\\u672C\"), \"\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u5728\\u5B89\\u88C5\\u8001\\u7248\\u672C\\u7684\\u65F6\\u5019\\u5BB9\\u6613\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u5230 github \\u4E0A\\u4E0B\\u8F7D\\u5BF9\\u5E94\\u7684 release \\u653E\\u5230\\u9879\\u76EE\\u4E2D\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u4E1C\\u897F\\u4E5F\\u6CA1\\u529E\\u6CD5\\u5347\\u7EA7\\uFF0C\\u6211\\u4EEC\\u8FD8\\u4E0D\\u5F97\\u4E0D\\u7528\\u7684\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onigasm\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-oniguruma\"), \" \\u672C\\u8D28\\u4E0A\\u662F\\u540C\\u4E00\\u4E2A\\u4E1C\\u897F\\uFF0C\\u90FD\\u662F\\u4ECE C++ \\u7F16\\u8BD1\\u8FC7\\u6765\\u7684\\uFF0C\\u90FD\\u662F wasm\\uFF0C\\u90FD\\u662F\\u8981\\u66FF\\u6362 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"atom\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"node-oniguruma\"), \"\\uFF0C\\u6240\\u4EE5 API \\u57FA\\u672C\\u76F8\\u540C\\uFF0C\\u8D1F\\u8D23\\u6B63\\u5219\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode\"), \" \\u7684\\u903B\\u8F91\\u8FED\\u4EE3\\u589E\\u52A0\\u4E86\\u5F88\\u591A\\u7684\\u529F\\u80FD\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u5B8C\\u5168\\u590D\\u523B\\uFF0C\\u53EF\\u4EE5\\u53BB\\u7FFB\\u6E90\\u7801\\u3002\\u4F46\\u662F\\u6211\\u8FD9\\u8FB9\\u56E0\\u4E3A\\u4E4B\\u524D\\u53C2\\u8003\\u7684\\u662F theia \\u7684\\u5F88\\u591A\\u903B\\u8F91\\uFF0C\\u76F8\\u5F53\\u4E8E vscode \\u7684\\u65E7\\u903B\\u8F91\\uFF0C\\u5305\\u62EC\\u4E3B\\u9898\\u6587\\u4EF6\\u3001\\u8BED\\u6CD5\\u6587\\u4EF6\\u3001textmate\\u89E3\\u6790\\u903B\\u8F91\\u7B49\\u90FD\\u53EF\\u80FD\\u4E0D\\u662F\\u6700\\u65B0\\u7684\\uFF0C\\u6240\\u4EE5\\u5982\\u679C\\u540C\\u65F6\\u53C2\\u8003 vscode \\u548C theia \\u6216\\u8005\\u8FD9\\u7BC7\\u6587\\u7AE0\\uFF0C\\u5176\\u4E2D\\u6709\\u53EF\\u80FD\\u548C\\u9884\\u671F\\u4E0D\\u592A\\u76F8\\u7B26\\u3002\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate@4.4.0\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onigasm@2.2.5\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode:dark_plus\"), \" \\u8FD9\\u4E09\\u4E2A\\u7EC4\\u5408\"))), mdx(\"h2\", null, \"\\u4E09\\u3001\\u624B\\u628A\\u624B\\u7684\\u5B9E\\u73B0 monaco-editor \\u4E2D\\u65B0\\u7684\\u9AD8\\u4EAE\\u903B\\u8F91\\u6269\\u5C55\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u505A WorkPad \\u9879\\u76EE\\u7684\\u65F6\\u5019\\u79EF\\u6512\\u7684\\u53EF\\u8FD0\\u884C\\u4EE3\\u7801\\uFF0C\\u5F53\\u65F6\\u53C2\\u8003\\u7684\\u662F theia \\u9879\\u76EE\\uFF0C\\u5927\\u90E8\\u5206\\u903B\\u8F91\\u4ECD\\u7136\\u80FD\\u5728 theia \\u7684\\u9879\\u76EE\\u4E2D\\u627E\\u5230\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u5373\\u4F7F\\u8BF4\\u7684\\u518D\\u600E\\u4E48\\u7B80\\u5355\\uFF0C\\u4F46\\u4E5F\\u4E0D\\u81F3\\u4E8E\\u4E24\\u884C\\u4EE3\\u7801\\u80FD\\u89E3\\u51B3\\u7684\\uFF0C\\u4ECE\\u6D41\\u7A0B\\u4E0A\\u8BF4\\u770B\\uFF0C\\u8FD8\\u662F\\u8981\\u5904\\u7406\\u5F88\\u591A\\u7684\\u8F6C\\u6362\\u624D\\u80FD\\u8DD1\\u901A\\u6574\\u4E2A\\u903B\\u8F91\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u6D41\\u7A0B\\u4E5F\\u662F\\u6211\\u505A\\u65B0\\u535A\\u5BA2\\u7684\\u65F6\\u5019\\uFF0C\\u60F3\\u8981\\u505A mdx \\u8BED\\u6CD5\\u7F16\\u8F91\\u5668\\u7684\\u8FC7\\u7A0B\\u3002\\u5176\\u4E2D\\u7528\\u5230\\u7684\\u8D44\\u6E90\\u57FA\\u672C\\u4E0A\\u90FD\\u662F vscode \\u5B98\\u65B9\\u7684\\uFF0C\\u6240\\u4EE5\\u6700\\u540E\\u6837\\u5F0F\\u548C vscode \\u4E00\\u5B9A\\u4E5F\\u662F\\u4E00\\u6837\\u7684\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6574\\u4E2A\\u4EE3\\u7801\\u7B97\\u662F\\u4E0D\\u7F3A\\u4EC0\\u4E48\\uFF0C\\u4F46\\u662F\\u548C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5B9E\\u9645\\u4F7F\\u7528\\u7684\\u5C11\\u4E86\\u5F88\\u591A\\u62BD\\u8C61\\uFF0C\\u4F30\\u8BA1\\u4E5F\\u6CA1\\u529E\\u6CD5\\u76F4\\u63A5\\u8FD0\\u884C\\uFF0C\\u4F46\\u662F\\u5173\\u952E\\u7684\\u4EE3\\u7801\\u90FD\\u5728\\uFF0C\\u6BD4\\u4E4B\\u524D\\u7684\\u6587\\u7AE0\\u4E5F\\u7EC6\\u81F4\\u7684\\u591A\\u3002\\u5982\\u679C\\u4EA4\\u6D41\\u7684\\u4EBA\\u591A\\u7684\\u8BDD\\u518D\\u8003\\u8651\\u5F00\\u6E90\\u51FA\\u6765\\u3002\")), mdx(\"h3\", null, \"1. \\u7F16\\u8F91\\u5668\\u52A0\\u8F7D\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco-editor-core\"), \" \\u800C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco-editor\"), \"\\uFF0C\\u56E0\\u4E3A\\u8BED\\u6CD5\\u90E8\\u5206\\u6211\\u4EEC\\u9700\\u8981\\u91CD\\u5199\\uFF0C\\u4E0D\\u9700\\u8981\\u81EA\\u5E26\\u7684\\u90A3\\u4E9B worker \\u7B49\\u7528\\u4E0D\\u5230\\u7684\\u903B\\u8F91\\u6240\\u4EE5 core \\u5C31\\u591F\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco\"), \" \\u7684\\u52A0\\u8F7D\\u53D6\\u51B3\\u4E8E\\u5404\\u79CD\\u7F16\\u8BD1\\u73AF\\u5883\\u5BF9\\u4F9D\\u8D56\\u7684\\u52A0\\u8F7D\\uFF0Cwebpack\\u3001webpack-based\\u3001parcel\\u3001vite \\u7B49\\uFF0C\\u4E0D\\u8FC7\\u597D\\u5728 monaco \\u540C\\u65F6\\u652F\\u6301 esm\\u3001amd\\uFF0C\\u52A0\\u8F7D\\u65B9\\u6848\\u53EF\\u4EE5\\u5F88\\u7075\\u6D3B\\u3002\\uFF08\\u63A8\\u8350\\u901A\\u8FC7 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/Microsoft/monaco-editor/blob/main/docs/integrate-amd.md\"\n }, \"AMD\"), \" \\u6765\\u52A0\\u8F7D\\uFF0C\\u4EE3\\u7801\\u4E2D\\u5F15\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"import * as monaco from \\\"monaco-editor/esm/vs/editor/editor.api\\\"\"), \" \\u4F5C\\u4E3A\\u7C7B\\u578B\\u58F0\\u660E\\uFF09\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AMD\"), \" \\u907F\\u514D\\u628A\\u8FD9\\u4E48\\u5927\\u4E00\\u4E2A\\u5305\\u6253\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bundle\"), \" \\u91CC\\u9762\\uFF0C\\u8282\\u7701\\u4E86\\u7F16\\u8BD1\\u7684\\u4F9D\\u8D56\\u3001\\u7F16\\u8BD1\\u65F6\\u95F4\\u7B49\\uFF0C\\u6B64\\u5916\\u7528\\u5916\\u90E8 CDN \\u4E5F\\u66F4\\u7075\\u6D3B\\uFF0C\\u4F60\\u53EF\\u4EE5\\u628A\\u8FD9\\u4E2A\\u66FF\\u6362\\u6210\\u81EA\\u5DF1\\u7684\\u8D44\\u6E90\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const loaderConfig = {\\n paths: {\\n vs: \\\"https://cdn.jsdelivr.net/npm/monaco-editor-core@0.30.1/min/vs\\\"\\n }\\n};\\nexport function monacoLoader(): Promise {\\n return new Promise((resolve, reject) => {\\n const script = document.createElement(\\\"script\\\");\\n script.src = `${loaderConfig.paths.vs}/loader.js`;\\n script.onload = () => configureLoader(resolve, reject);\\n script.onerror = reject;\\n document.body.appendChild(script);\\n });\\n}\\nfunction configureLoader(resolve: (monaco: Monaco) => void, reject: Function) {\\n window.require.config(loaderConfig);\\n window.require([\\\"vs/editor/editor.main\\\"], resolve, reject);\\n}\\nexport default monacoLoader;\\n\")), mdx(\"h3\", null, \"2. \\u7F16\\u8F91\\u5668\\u521D\\u59CB\\u5316\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const monaco = await monacoLoader();\\n(window as any).monaco = monaco;\\n\\nconst defaultModel = monaco.editor.createModel(\\n `# Head1\\\\n\\\\nHello World.`,\\n \\\"markdown\\\",\\n monaco.Uri.parse(\\\"file:///index.md\\\")\\n);\\n\\nconst editor = monaco.editor.create(\\n containerRef.current,\\n {\\n model: defaultModel,\\n automaticLayout: true\\n },\\n {}\\n);\\n\")), mdx(\"h3\", null, \"3. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"Oniguruma ASM\"), \" \\u5E76\\u521D\\u59CB\\u5316\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"OnigasmLib\")), mdx(\"p\", null, \"\\u5C31\\u50CF\\u4E0A\\u9762\\u8BF4\\u7684\\uFF0C\\u53EA\\u662F\\u4E00\\u4E2A\\u6B63\\u5219\\u7684\\u8F93\\u5165\\u8F93\\u51FA\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { loadWASM, OnigScanner, OnigString } from \\\"onigasm\\\";\\n\\nconst onigasmPath = \\\"https://cdn.jsdelivr.net/npm/onigasm@2.2.5/lib/onigasm.wasm\\\";\\n\\n// onigasm \\u52A0\\u8F7D\\u5668\\nonigasmPromise = fetch(onigasmPath, { cache: \\\"force-cache\\\" })\\n .then(res => res.arrayBuffer())\\n .then(buffer => loadWASM(buffer))\\n .then(() => new OnigasmLib());\\n\\nexport class OnigasmLib implements IOnigLib {\\n createOnigScanner(sources: string[]) => new OnigScanner(sources)\\n createOnigString(sources: string) => new OnigString(sources)\\n}\\n\")), mdx(\"h3\", null, \"4. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"textmate\"), \" \\u9700\\u8981\\u7528\\u5230\\u7684\\u4E3B\\u9898\\u6837\\u5F0F\"), mdx(\"p\", null, \"\\u4E3B\\u9898\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u5C31\\u6BD4\\u8F83\\u641E\\u7B11\\u4E86\\uFF0Cvscode \\u7684\\u4E3B\\u9898 json\\u3001monaco-editor \\u7684\\u4E3B\\u9898\\u3001textmate \\u9700\\u8981\\u7684\\u4E3B\\u9898\\uFF0C\\u8FD9\\u4E09\\u4E2A\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u662F\\u4E0D\\u5B8C\\u5168\\u76F8\\u540C\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u867D\\u7136\\u91C7\\u7528\\u4E86 textmate \\u7684\\u4E3B\\u9898\\uFF0C\\u4F46\\u662F\\u4E5F\\u5E76\\u6CA1\\u6709\\u5728\\u81EA\\u5B9A\\u4E49\\u4E00\\u5957\\u6837\\u5F0F\\uFF0C\\u4ECD\\u7136\\u91C7\\u7528\\u4E86 monaco-editor \\u81EA\\u5DF1\\u7684\\u7740\\u8272\\u4E3B\\u9898\\u89C4\\u5219\\uFF0C\\u6240\\u4EE5 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u91C7\\u7528 textmate \\u8BED\\u6CD5\\u548C rule \\u7B49\\uFF0C\\u6700\\u540E\\u751F\\u6210\\u5BF9\\u5E94 token \\u7684\\u65F6\\u5019\\u989C\\u8272\\u8FD8\\u662F\\u4F7F\\u7528\\u7684\\u662F moanco \\u7684 theme \\u7684\\u989C\\u8272\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5FC5\\u987B\\u8981\\u6709\\u4E2A\\u8F6C\\u6362\\u903B\\u8F91\\uFF0C\\u628A vscode \\u7684\\u4E3B\\u9898\\u8F6C\\u6210 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawTheme\"), \" \\u7ED9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"textmate\"), \"\\uFF0C\\u8FD8\\u8981\\u8F6C\\u6210 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IStandaloneThemeData\"), \" \\u7ED9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco\"), \" \\u624D\\u80FD\\u8BA9\\u4E24\\u8FB9\\u90FD\\u80FD\\u7EDF\\u4E00\\u6837\\u5F0F\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"token\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rule\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"settings\"), \" \\u6837\\u5F0F\\u5BF9\\u5E94\\u8D77\\u6765\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5728 vscode \\u7684\\u4E3B\\u9898\\u548C textmate \\u7684\\u5DEE\\u4E0D\\u591A\\uFF0Cmonaco \\u7684\\u4E3B\\u9898 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vscode-textmate\"), \" \\u4E5F\\u5DF2\\u7ECF\\u7ED9\\u6211\\u4EEC\\u5C01\\u88C5\\u597D\\u4E86\\u8272\\u8868\\u3002\"), mdx(\"p\", null, \"vscode \\u5185\\u7F6E\\u4E3B\\u9898\\u4E2D vs-dark-plus \\u4E00\\u822C\\u7528\\u7684\\u6BD4\\u8F83\\u591A\\uFF0C\\u53EF\\u4EE5\\u5728\\u8FD9\\u91CC\\u627E\\u5230\\u6E90\\u6587\\u4EF6: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/dark_plus.json\"\n }, \"dark-plus\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{ // vscode theme json \\u8282\\u9009\\n \\\"$schema\\\": \\\"vscode://schemas/color-theme\\\",\\n \\\"name\\\": \\\"Dark+ (default dark)\\\",\\n \\\"include\\\": \\\"./dark_vs.json\\\",\\n \\\"tokenColors\\\": [\\n {\\n \\\"name\\\": \\\"Function declarations\\\",\\n \\\"scope\\\": [\\n \\\"entity.name.function\\\",\\n //...\\n ],\\n \\\"settings\\\": { \\\"foreground\\\": \\\"#DCDCAA\\\" }\\n },\\n //...\\n ]\\n}\\n\")), mdx(\"p\", null, \"textmate \\u9700\\u8981\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawTheme\"), \" \\u957F\\u8FD9\\u6837\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"/**\\n * A single theme setting.\\n */\\nexport interface IRawThemeSetting {\\n readonly name?: string;\\n readonly scope?: string | string[];\\n readonly settings: {\\n readonly fontStyle?: string;\\n readonly foreground?: string;\\n readonly background?: string;\\n };\\n}\\n/**\\n * A TextMate theme.\\n */\\nexport interface IRawTheme {\\n readonly name?: string;\\n readonly settings: IRawThemeSetting[];\\n}\\n\")), mdx(\"p\", null, \"monaco-editor \\u652F\\u6301\\u7684 theme \\u957F\\u8FD9\\u6837\\uFF0C\\u6700\\u4E3B\\u8981\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"encodedTokensColors\"), \" \\u7684\\u4E00\\u4E2A\\u989C\\u8272\\u6570\\u7EC4\\u6CA1\\u6709\\u5C55\\u793A\\u5728\\u8FD9\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"monaco.editor.defineTheme('myCustomTheme', {\\n base: 'vs', // can also be vs-dark or hc-black\\n inherit: true, // can also be false to completely replace the builtin rules\\n rules: [\\n { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },\\n { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },\\n { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above\\n ],\\n colors: {\\n 'editor.foreground': '#000000'\\n }\\n});\\n\")), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u903B\\u8F91\\u4E2D\\u5305\\u542B\\u4E86\\u4E3B\\u9898\\u7684 include \\u5F15\\u7528\\uFF0C\\u989C\\u8272\\u8F6C\\u6362\\u7B49\\uFF0C\\u628A vscode \\u7684 json \\u4E3B\\u9898\\u8F6C\\u6362\\u4E3A textmate \\u548C monaco-editor \\u5206\\u522B\\u7684\\u4E3B\\u9898\\u7C7B\\u578B\\uFF0C\\u53EF\\u4EE5\\u7ED9\\u5230\\u8BED\\u6CD5\\u89E3\\u6790\\u548C\\u4E3B\\u9898\\u5E94\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { IStandaloneThemeData, BuiltinTheme, ITokenThemeRule } from \\\"../editor.d\\\";\\nimport { IRawTheme, IRawThemeSetting, Registry } from \\\"./vscode-textmate/main\\\";\\n\\nexport type VSCTheme = {\\n colors: { [i: string]: string };\\n tokenColors: IRawThemeSetting[];\\n include?: string;\\n};\\ntype Includes = { [i: string]: VSCTheme };\\nexport type ThemeMix = {\\n name: string;\\n textmateTheme: IRawTheme;\\n monacoTheme: IStandaloneThemeData;\\n};\\n\\nexport class MonacoThemeRegistry {\\n protected themes = new Map();\\n public getRawTheme = (name: string) => this.themes.get(name)?.textmateTheme;\\n public getMonacoTheme = (name: string) => this.themes.get(name)?.monacoTheme;\\n\\n mergedVSCTheme = (json: VSCTheme, includes?: Includes): VSCTheme => {\\n const after: VSCTheme = {\\n colors: json.colors,\\n tokenColors: json.tokenColors,\\n };\\n if (json.include && includes && includes[json.include]) {\\n const parent = this.mergedVSCTheme(includes[json.include], includes);\\n after.colors = { ...(parent.colors || {}), ...after.colors };\\n after.tokenColors = [...(parent.tokenColors || []), ...after.tokenColors];\\n }\\n return after;\\n };\\n\\n genTextmateTheme = (vsctheme: VSCTheme) => {\\n return { settings: [...vsctheme.tokenColors] };\\n };\\n\\n genMonacoTheme = (\\n vsctheme: VSCTheme,\\n textmateTheme: IRawTheme,\\n monacoBase: BuiltinTheme = \\\"vs-dark\\\"\\n ) => {\\n const monacoTheme: IStandaloneThemeData = {\\n base: monacoBase || \\\"vs\\\",\\n inherit: true,\\n rules: [], // token \\u548C\\u6837\\u5F0F\\u5BF9\\u5E94\\u89C4\\u5219\\n colors: {}, // \\u4E3B\\u8981\\u662F\\u7F16\\u8F91\\u5668\\u6700\\u666E\\u9002\\u7684\\u989C\\u8272\\u8868\\uFF0C\\u524D\\u666F\\u80CC\\u666F\\u4E4B\\u7C7B\\n encodedTokensColors: [], // \\u7F16\\u7801\\u540E\\u7684\\u989C\\u8272\\u89C4\\u5219\\uFF0C\\u5C31\\u662F css \\u4E2D\\u7684 mtk1 \\u4E4B\\u7C7B\\n };\\n\\n // \\u9ED8\\u8BA4\\u7684\\u7F16\\u8F91\\u5668\\u989C\\u8272\\uFF0C\\u5BF9\\u5E94\\u80CC\\u666F\\u3001\\u524D\\u666F\\u3001\\u9009\\u62E9\\u3001\\u9AD8\\u4EAE\\u7B49\\u7B49\\u4E00\\u822C\\u89C4\\u5219\\n if (vsctheme.colors) Object.assign(monacoTheme.colors, vsctheme.colors);\\n // \\u628A textmate \\u7684 IRawThemeSetting \\u8F6C\\u4E3A monaco \\u7684 ITokenThemeRule\\n for (const setting of vsctheme.tokenColors)\\n this.transform(setting, (rule) => monacoTheme.rules.push(rule));\\n\\n // \\u540E\\u9762\\u5C31\\u662F\\u63D0\\u53D6 encodedTokensColors \\u6765\\u5B9E\\u73B0\\u771F\\u5B9E\\u7684 monaco \\u7740\\u8272\\n // \\u8FD9\\u91CC\\u5FC5\\u987B\\u4F7F\\u7528 4.x \\u7684\\u4EE3\\u7801\\uFF0C\\u4E0D\\u7136\\u8FD9\\u91CC\\u4F1A\\u51FA\\u73B0\\u7C7B\\u578B\\u95EE\\u9898\\n const reg = new Registry();\\n reg.setTheme(textmateTheme);\\n monacoTheme.encodedTokensColors = reg.getColorMap();\\n\\n // index 0 has to be set to null for monaco\\n monacoTheme.encodedTokensColors[0] = null!;\\n // index 1 and 2 are the default colors\\n const foreColor = monacoTheme.colors[\\\"editor.foreground\\\"];\\n if (foreColor) monacoTheme.encodedTokensColors[1] = foreColor;\\n const backColor = monacoTheme.colors[\\\"editor.background\\\"];\\n if (backColor) monacoTheme.encodedTokensColors[2] = backColor;\\n return monacoTheme;\\n };\\n\\n public register(\\n givenName: string,\\n vsc: VSCTheme,\\n monacoBase: BuiltinTheme = \\\"vs-dark\\\"\\n ): ThemeMix {\\n if (this.themes.has(givenName)) return this.themes.get(givenName)!;\\n\\n const textmateTheme = this.genTextmateTheme(vsc);\\n const monacoTheme = this.genMonacoTheme(vsc, textmateTheme, monacoBase);\\n\\n const result: ThemeMix = {\\n name: givenName,\\n textmateTheme: this.genTextmateTheme(vsc),\\n monacoTheme: this.genMonacoTheme(vsc, textmateTheme, monacoBase),\\n };\\n this.themes.set(givenName, result);\\n monaco.editor.defineTheme(givenName, monacoTheme);\\n return result;\\n }\\n\\n protected transform(\\n setting: any,\\n acceptor: (rule: ITokenThemeRule) => void\\n ): void {\\n if (typeof setting.scope === \\\"undefined\\\") setting.scope = [\\\"\\\"];\\n if (typeof setting.scope === \\\"string\\\") setting.scope = [setting.scope];\\n\\n for (const scope of setting.scope) {\\n const settings = Object.keys(setting.settings).reduce(\\n (previous: { [key: string]: string }, current) => {\\n let value = setting.settings[current];\\n if (typeof value === \\\"string\\\")\\n value = value.replace(/^\\\\#/, \\\"\\\").slice(0, 6);\\n previous[current] = value;\\n return previous;\\n },\\n {}\\n );\\n acceptor({ ...settings, token: scope });\\n }\\n }\\n}\\nexport const monacoThemeRegistry = new MonacoThemeRegistry();\\n\\nconst darkPlus = monacoThemeRegistry.mergedVSCTheme(\\n require(\\\"./theme/vscode/dark_plus.json\\\"),\\n {\\n \\\"./dark_defaults.json\\\": require(\\\"./theme/vscode/dark_defaults.json\\\"),\\n \\\"./dark_vs.json\\\": require(\\\"./theme/vscode/dark_vs.json\\\"),\\n }\\n);\\nexport const DARK_DEFAULT_THEME = monacoThemeRegistry.register(\\n \\\"dark-plus\\\",\\n darkPlus,\\n \\\"vs-dark\\\"\\n);\\n\")), mdx(\"h3\", null, \"5. \\u51C6\\u5907\\u597D \", mdx(\"inlineCode\", {\n parentName: \"h3\"\n }, \"textmate\"), \" \\u9700\\u8981\\u7528\\u5230\\u7684\\u8BED\\u6CD5\\u6587\\u4EF6\"), mdx(\"p\", null, \"\\u8FD9\\u5757\\u662F\\u6700\\u590D\\u6742\\u7684\\uFF0C\\u6D89\\u53CA\\u5230\\u7684\\u903B\\u8F91\\u5F88\\u591A\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u7B97\\u662F\\u6700\\u7B80\\u5355\\u7684\\uFF0C\\u56E0\\u4E3A\\u90FD\\u5DF2\\u7ECF\\u88AB\\u5C01\\u88C5\\u597D\\u4E86\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u7F16\\u8F91\\u5668\\u4E00\\u822C\\u60C5\\u51B5\\u4E0B\\u90FD\\u9700\\u8981\\u52A0\\u8F7D\\u975E\\u5E38\\u591A\\u7684\\u8BED\\u6CD5\\uFF0C\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ts\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"css\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"html\"), \"\\u7B49\\uFF0C\\u9700\\u8981\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u7EDF\\u4E00\\u914D\\u7F6E\\u3001\\u52A0\\u8F7D\\u7B49\\uFF0C\\u53EF\\u4EE5\\u53EB\\u505A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"provider\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"registery\"), \"\\u7B49\\u6982\\u5FF5\\uFF0C\\u8FD9\\u91CC\\u5148\\u5FFD\\u7565\\uFF0C\\u4EE5\\u4E00\\u4E2A\\u8BED\\u8A00\\u4E3A\\u4F8B\\u5B50\\uFF0C\\u591A\\u8BED\\u8A00\\u7684\\u5C01\\u88C5\\u53EF\\u4EE5\\u81EA\\u5DF1\\u641E\\u3002\")), mdx(\"p\", null, \"textmate \\u7684\\u8BED\\u6CD5\\u662F\\u6709\\u89C4\\u8303\\u6807\\u51C6\\u7684\\uFF0CVSCode \\u7684\\u9879\\u76EE\\u4ED3\\u5E93\\u4E2D\\u76F4\\u63A5\\u901A\\u8FC7\\u811A\\u672C\\u8F6C\\u5316\\u4E3A\\u4E86 json \\u683C\\u5F0F\\u7684\\u7EDF\\u4E00\\u683C\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5230 VSCode \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"markdown\"), \" \\u8BED\\u6CD5\\u6587\\u4EF6\\u4E2D\\u67E5\\u770B \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/tree/main/extensions/markdown-basics\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown-basics\")), \" \\u7684\\u5B9A\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u4E3B\\u8981\\u662F\\u4E09\\u4E2A\\u6587\\u4EF6\\uFF08\\u8BED\\u6CD5\\u5B9A\\u4E49\\u3001\\u7F16\\u8F91\\u884C\\u4E3A\\u3001\\u8BED\\u8A00\\u5B9A\\u4E49\\uFF09\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/package.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"package.json\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/syntaxes/markdown.tmLanguage.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown.tmLanguage.json\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/microsoft/vscode/blob/main/extensions/markdown-basics/language-configuration.json\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"language-configuration.json\")))), mdx(\"p\", null, \"\\u6839\\u636E\\u4E0A\\u9762\\u83B7\\u5F97\\u7684\\u914D\\u7F6E\\uFF0C\\u5411 monaco \\u589E\\u52A0\\u8BED\\u8A00\\u5B9A\\u4E49\\u548C\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const languageId = 'markdown'\\nmonaco.languages.register({\\n id: languageId,\\n extensions: [\\\".md\\\", \\\".markdown\\\", \\\".mdown\\\", \\\".mkdn\\\", \\\".mkd\\\", \\\".mdwn\\\", \\\".mdtxt\\\", \\\".mdtext\\\"],\\n aliases: [\\\"Markdown\\\", \\\"markdown\\\"]\\n});\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u662F\\u5728 monaco \\u4E2D\\u5B9A\\u4E49\\u4E86\\u8BED\\u8A00\\u548C\\u8BED\\u8A00\\u7684\\u914D\\u7F6E\\uFF0C\\u8BED\\u6CD5\\u90E8\\u5206\\u4E0B\\u9762\\u7EE7\\u7EED\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { Registry, IRawGrammar, parseRawGrammar } from \\\"./vscode-textmate/main\\\";\\n\\nconst mdScopeName = \\\"text.html.markdown\\\"\\n\\n// \\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u6CE8\\u518C\\u5668\\uFF0C\\u6574\\u4E2A\\u8BED\\u6CD5\\u652F\\u6301\\u7684\\u6838\\u5FC3\\ngrammarRegistry = new Registry({\\n getOnigLib: () => onigasmPromise,\\n theme: DARK_DEFAULT_THEME.textmateTheme,\\n loadGrammar: async (scopeName: string) => {\\n if(scopeName === \\\"text.html.markdown\\\") {\\n return await fetch('./markdown.tmLanguage.json', { cache: \\\"force-cache\\\" }).then(res => res.json())\\n }\\n return undefined;\\n },\\n});\\n\")), mdx(\"p\", null, \"\\u597D\\u50CF\\u8FD9\\u4E2A\\u8BED\\u6CD5\\u90E8\\u5206\\u903B\\u8F91\\u548C monaco \\u6CA1\\u4EC0\\u4E48\\u5173\\u7CFB\\uFF0C\\u90A3\\u662F\\u56E0\\u4E3A\\u6211\\u4EEC\\u8FD8\\u6CA1\\u6709\\u548C monaco \\u8FDE\\u5728\\u4E00\\u8D77\\uFF0C\\u6240\\u4EE5\\u73B0\\u5728\\u80AF\\u5B9A\\u6CA1\\u6CD5\\u8D77\\u4F5C\\u7528\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u8FD9\\u53EA\\u662F\\u4E00\\u4E2A\\u8BED\\u8A00\\u7684\\u5E94\\u7528\\uFF0C\\u5982\\u679C\\u5E94\\u7528\\u6570\\u5341\\u4E2A\\u7684\\u8BDD\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u4E00\\u4E2A\\u7EDF\\u4E00\\u7684\\u8BED\\u8A00\\u6CE8\\u518C\\u673A\\u5236\\u7C7B\\u4F3C\\u7684\\u4E1C\\u897F\\u65B9\\u4FBF\\u5F15\\u7528\")), mdx(\"h3\", null, \"6. \\u5F00\\u542F\\u8BED\\u8A00\\u652F\\u6301\"), mdx(\"p\", null, \"\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.editor.setTokensProvider\"), \" \\u6765\\u94FE\\u63A5 monaco \\u548C textmate\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { INITIAL, StackElement, IGrammar } from \\\"./vscode-textmate/main\\\";\\n\\nexport class TokenizerState implements IState {\\n constructor(public readonly ruleStack: StackElement) {}\\n clone = (): IState => new TokenizerState(this.ruleStack)\\n equals = (other: IState): boolean => (\\n other instanceof TokenizerState &&\\n (other === this || other.ruleStack === this.ruleStack)\\n )\\n}\\n\\n// \\u6FC0\\u6D3B\\u8BED\\u8A00\\u652F\\u6301\\nconst _activatedLanguages = new Set();\\nconst activateLanguage = async (languageId: string): Promise => {\\n // \\u83B7\\u53D6\\u8BED\\u8A00\\u914D\\u7F6E\\n /*{\\n \\\"comments\\\": { \\\"blockComment\\\": [\\\"\\\"] },\\n // symbols used as brackets\\n \\\"brackets\\\": [[\\\"{\\\", \\\"}\\\"], [\\\"[\\\", \\\"]\\\"], [\\\"(\\\", \\\")\\\"]],\\n // symbols that are auto closed when typing\\n \\\"autoClosingPairs\\\": [\\n [\\\"{\\\", \\\"}\\\"], // ---> \\u9700\\u8981\\u624B\\u52A8\\u8F6C\\u4E3A open\\u3001close \\u7684\\u5F62\\u5F0F\\n {\\n \\\"open\\\": \\\"\\\\\\\"\\\",\\n \\\"close\\\": \\\"\\\\\\\"\\\",\\n \\\"notIn\\\": [\\\"string\\\"]\\n },\\n // ...\\n ],\\n // symbols that that can be used to surround a selection\\n \\\"surroundingPairs\\\": [\\n [\\\"{\\\", \\\"}\\\"],\\n // ...\\n ],\\n \\\"folding\\\": {\\n // ...\\n }\\n }\\n */\\n const configuration = await fetch('./language-configuration.json').then(res => res.json())\\n // \\u8F6C\\u6362\\u90E8\\u5206\\u914D\\u7F6E\\uFF08\\u91CD\\u8981\\uFF09\\n raw.autoClosingPairs = raw.autoClosingPairs.map((pair: any) => {\\n if (Array.isArray(pair)) return { open: pair[0], close: pair[1] };\\n return pair;\\n });\\n monaco.languages.setLanguageConfiguration(languageId, configuration);\\n\\n // grammer \\u90E8\\u5206\\n /*\\n {\\n \\\"language\\\": \\\"markdown\\\",\\n \\\"scopeName\\\": \\\"text.html.markdown\\\",\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 IRawGrammar \\u6587\\u4EF6\\n \\\"path\\\": \\\"./syntaxes/markdown.tmLanguage.json\\\",\\n // \\u8FD9\\u91CC\\u662F IGrammarConfiguration \\u914D\\u7F6E\\n \\\"embeddedLanguages\\\": {\\n \\\"meta.embedded.block.html\\\": \\\"html\\\",\\n \\\"source.js\\\": \\\"javascript\\\",\\n \\\"source.css\\\": \\\"css\\\",\\n }\\n }\\n */\\n // \\u6839\\u636E\\u4E4B\\u524D\\u6CE8\\u518C\\u7684\\u8BED\\u8A00\\u83B7\\u5F97\\u8BED\\u8A00 id(number)\\n const encodedLanguageId = monaco.languages.getEncodedLanguageId(languageId);\\n // \\u8F6C\\u6362\\u90E8\\u5206\\u914D\\u7F6E\\uFF08\\u91CD\\u8981\\uFF09\\n if (tmConfig) {\\n const embeddedLanguages = tmConfig.embeddedLanguages || {};\\n for (const key in embeddedLanguages) {\\n if (Object.prototype.hasOwnProperty.call(embeddedLanguages, key)) {\\n const lang = embeddedLanguages[key];\\n embeddedLanguages[key] = monaco.languages.getEncodedLanguageId(lang);\\n if (embeddedLanguages[key] === 0) delete embeddedLanguages[key];\\n }\\n }\\n tmConfig.embeddedLanguages = embeddedLanguages;\\n }\\n\\n const grammar = await grammarRegistry.loadGrammarWithConfiguration(\\n mdScopeName,\\n encodedLanguageId,\\n tmConfig\\n );\\n \\n monaco.languages.setTokensProvider(languageId,\\n {\\n getInitialState: () => new TokenizerState(INITIAL),\\n tokenizeEncoded(line: string, state: TokenizerState): IEncodedLineTokens {\\n // console.log('unencoded token for debug', line);\\n // console.log(grammar.tokenizeLine(line, state.ruleStack));\\n const result = grammar.tokenizeLine2(line, state.ruleStack);\\n return {\\n endState: new TokenizerState(result.ruleStack),\\n tokens: result.tokens\\n };\\n }\\n }\\n );\\n console.info(\\\"\\u5F00\\u542F\\u8BED\\u8A00 \\\" + languageId + \\\"\\u652F\\u6301\\\");\\n};\\n\\nactivateLanguage(languageId)\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u5C31\\u662F\\u5168\\u90E8\\u7684 textmate \\u5E94\\u7528\\uFF0C\\u56E0\\u4E3A\\u8FED\\u4EE3\\u7684\\u53D1\\u5C55\\uFF0C\\u548C\\u76EE\\u524D vscode \\u7684\\u4F7F\\u7528\\u4E0D\\u592A\\u4E00\\u81F4\\u4E86\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u80FD\\u591F\\u5F97\\u5230\\u6211\\u4EEC\\u9700\\u8981\\u7684\\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u62BD\\u8C61\\u548C\\u6279\\u91CF\\u7684\\u6DFB\\u52A0\\u8BED\\u8A00\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u63D0\\u4E86\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"markdown\"), \" \\u7684\\u8BED\\u6CD5 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode/tree/main/extensions/markdown-basics\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"markdown-basics\")), \"\\uFF0C\\u76F8\\u540C\\u76EE\\u5F55\\u4E0B\\u8FD8\\u6709\\u56DB\\u5341\\u591A\\u4E2A\\u5176\\u4ED6\\u5185\\u7F6E\\u7684\\u8BED\\u6CD5\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u8BE6\\u7EC6\\u67E5\\u770B\\u7684\\u8BDD\\u91CC\\u9762\\u4E5F\\u8BF4\\u660E\\u4E86\\u662F\\u5728\\u6E90\\u9879\\u76EE\\u7684 tmLanguage \\u8F6C\\u6362\\u8FC7\\u6765\\u7684\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"This file has been converted from \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/textmate/yaml.tmbundle/blob/master/Syntaxes/YAML.tmLanguage\"\n }, \"https://github.com/textmate/yaml.tmbundle/blob/master/Syntaxes/YAML.tmLanguage\"), \" If you want to provide a fix or improvement, please create a pull request against the original repository. Once accepted there, we are happy to receive an update request.\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u80FD\\u591F\\u4E00\\u4E0B\\u5B50\\u83B7\\u53D6\\u5230\\u8FD9\\u4E9B\\u8BED\\u6CD5\\u89C4\\u5219\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"bat, clojure, coffeescript, cpp, csharp, css, dart, diff, docker, fsharp, go, groovy, handlebars, hlsl, html, ini, ipynb, java, javascript, json, julia, latex, less, log, lua, make, markdown-basics, markdown-math, objective-c, perl, php, powershell, pug, python, r, razor, ruby, rust, scss, shaderlab, shellscript, sql, swift, typescript-basics, vb, xml, yaml\\n\")), mdx(\"p\", null, \"\\u548C\\u4E0A\\u9762\\u7684\\u8BED\\u6CD5\\u903B\\u8F91\\u76F8\\u540C\\uFF0C\\u6211\\u4EEC\\u9700\\u8981\\u7684\\u4E1C\\u897F\\u6709\\uFF1A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.languages.ILanguageExtensionPoint\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"monaco.editor.LanguageConfiguration\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IRawGrammar\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"IGrammarConfiguration\"), \" \\u8FD9\\u56DB\\u4E2A\\u4E1C\\u897F\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"package.json\"), \" \\u4E2D\\u90FD\\u80FD\\u770B\\u5230\\u3002\\u4EE5 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bat\"), \" \\u4E3A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"contributes\\\": {\\n \\\"languages\\\": [\\n {\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 monaco.languages.ILanguageExtensionPoint \\u6587\\u4EF6\\n \\\"id\\\": \\\"markdown\\\",\\n \\\"aliases\\\": [\\\"Markdown\\\", \\\"markdown\\\"],\\n \\\"extensions\\\": [\\\".md\\\", \\\".markdown\\\", /*...*/],\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 monaco.editor.LanguageConfiguration \\u6587\\u4EF6\\n \\\"configuration\\\": \\\"./language-configuration.json\\\"\\n }\\n ],\\n \\\"grammars\\\": [\\n {\\n \\\"language\\\": \\\"markdown\\\",\\n \\\"scopeName\\\": \\\"text.html.markdown\\\",\\n // \\u8FD9\\u91CC\\u662F\\u5F15\\u7528\\u7684 IRawGrammar \\u6587\\u4EF6\\n \\\"path\\\": \\\"./syntaxes/markdown.tmLanguage.json\\\",\\n // \\u8FD9\\u91CC\\u662F IGrammarConfiguration \\u914D\\u7F6E\\uFF08\\u9700\\u8981\\u5C06\\u5B57\\u7B26\\u4E32\\u7684 language \\u8F6C\\u4E3A\\u6570\\u5B57id\\u7684 monaco.languages.getEncodedLanguageId(lang)\\uFF09\\n \\\"embeddedLanguages\\\": {\\n \\\"meta.embedded.block.html\\\": \\\"html\\\",\\n \\\"source.js\\\": \\\"javascript\\\",\\n \\\"source.css\\\": \\\"css\\\",\\n }\\n }\\n ],\\n },\\n}\\n\")), mdx(\"p\", null, \"\\u5176\\u4ED6\\u8BED\\u6CD5\\u6587\\u4EF6\\u57FA\\u672C\\u4E0A\\u90FD\\u662F\\u8FD9\\u4E2A\\u914D\\u7F6E\\u7ED3\\u6784\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u628A\\u5168\\u90E8\\u8BED\\u8A00\\u6587\\u4EF6\\u5939\\u62F7\\u5230\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u4E2D\\uFF0C\\u7136\\u540E\\u6574\\u5408\\u4E00\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { IGrammarConfiguration } from \\\"./textmate/vscode-textmate/main\\\";\\n\\ntype GrammarPkg = {\\n contributes: {\\n languages: {\\n id: string;\\n extensions: string[];\\n aliases: string[];\\n configuration: string;\\n }[];\\n grammars: ({\\n language: string;\\n scopeName: string;\\n path: string;\\n } & IGrammarConfiguration)[];\\n };\\n};\\nexport type GrammarInfo = {\\n id: string;\\n languageId: string;\\n scopeName: string;\\n language?: {\\n id: string;\\n extensions: string[];\\n aliases: string[];\\n };\\n tmConfig?: IGrammarConfiguration;\\n tmPath: string;\\n configurationPath: string;\\n};\\n\\nconst basePath = \\\"/libs/grammars\\\";\\n\\nconst grammarsPath: string[] = [\\n \\\"bat\\\",\\n \\\"clojure\\\",\\n \\\"coffeescript\\\",\\n \\\"cpp\\\",\\n \\\"csharp\\\",\\n \\\"css\\\",\\n // ...\\n];\\n\\nconst fixPath = (s: string) => s.replace(/\\\\.\\\\//, \\\"\\\");\\n// \\u4E0D\\u4E25\\u683C\\u7684 json \\u89E3\\u6790\\u9632\\u6B62\\u67D0\\u4E9B\\u8BED\\u6CD5\\u6587\\u4EF6\\u6709\\u6CE8\\u91CA\\u3001\\u591A\\u4E2A\\u9017\\u53F7\\u4E4B\\u7C7B\\u7684\\u95EE\\u9898\\nconst easyJsonDec = async (str: string) => new Function(`return ${str}`)();\\nexport const loadRawJson = async (path: string) => {\\n return await fetch(path, { cache: \\\"force-cache\\\" })\\n .then((res) => res.text())\\n .then((str) => easyJsonDec(str));\\n};\\n\\nexport const prepareGrammars = async () => {\\n // \\u5F02\\u6B65\\u52A0\\u8F7D\\u7684\\u5F62\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u6539\\u6210\\u6253\\u5305\\u3001\\u9884\\u6E32\\u67D3\\u3001\\u9884\\u5904\\u7406\\u7B49\\u63D0\\u524D\\u5408\\u5E76\\u7684\\u624B\\u6BB5\\u907F\\u514D\\u8FD9\\u4E48\\u591A\\u7F51\\u7EDC\\u8BF7\\u6C42\\n const grammarsPkgs: GrammarPkg[] = await Promise.all(\\n grammarsPath.map((p) =>\\n fetch(`${basePath}/${p}/package.json`, { cache: \\\"force-cache\\\" }).then((res) => res.json())\\n )\\n );\\n\\n const grammarsOutput: GrammarInfo[] = [];\\n\\n grammarsPkgs.forEach(async (grammar, i) => {\\n const folder = `${basePath}/${grammarsPath[i]}`;\\n const { grammars, languages } = grammar.contributes;\\n\\n grammars.forEach(async (grammarConf) => {\\n const tm = grammars.find((g) => g.scopeName == grammarConf.scopeName)!;\\n\\n let language =\\n languages.length == 1\\n ? languages[0]\\n : languages.find((g) => g.id == tm.language);\\n\\n if (!language || !language.configuration) return;\\n\\n grammarsOutput.push({\\n id: grammarConf.scopeName,\\n languageId: language.id,\\n scopeName: tm.scopeName,\\n language,\\n tmConfig: tm,\\n tmPath: `${folder}/${fixPath(tm.path)}`,\\n configurationPath: `${folder}/${fixPath(language.configuration)}`,\\n });\\n });\\n });\\n return grammarsOutput;\\n};\\n\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u6211\\u4EEC\\u5C31\\u5B8C\\u6574\\u7684\\u5F15\\u5165\\u4E86\\u5168\\u90E8\\u7684\\u8BED\\u8A00\\u7684\\u6CE8\\u518C\\u4FE1\\u606F\\uFF0C\\u5305\\u62EC\\u8BED\\u6CD5\\u548C\\u8BED\\u6CD5\\u914D\\u7F6E\\u7684\\u6587\\u4EF6\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u5728\\u4E4B\\u524D\\u7684\\u52A0\\u8F7D\\u903B\\u8F91\\u4E2D\\u76F4\\u63A5\\u5F15\\u7528\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u81EA\\u5DF1\\u6DFB\\u52A0\\u8BED\\u6CD5\"), mdx(\"p\", null, \"\\u8FD9\\u7BC7\\u6587\\u7AE0\\u7684\\u8BDE\\u751F\\u4E5F\\u662F\\u56E0\\u4E3A\\u6211\\u60F3\\u8981\\u8131\\u79BB\\u4E4B\\u524D\\u7684 workpad \\u5B9E\\u73B0\\u4E00\\u4E2A\\u8F7B\\u91CF\\u7684\\u7F16\\u8F91\\u5668\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mdx\"), \"\\uFF0C\\u4E4B\\u524D\\u6CA1\\u6709\\u6DFB\\u52A0\\u8FD9\\u4E2A\\u8BED\\u8A00\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u9700\\u8981\\u65B0\\u589E\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5728 vscode \\u4E2D\\u627E\\u5230\\u54CD\\u5E94\\u7684\\u8BED\\u6CD5\\u6269\\u5C55\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"373px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.40926640926641%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBP/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHgjeIaJ//EABcQAAMBAAAAAAAAAAAAAAAAAAECEBL/2gAIAQEAAQUCZMmE3//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABkQAAIDAQAAAAAAAAAAAAAAAAEQABExcf/aAAgBAQAGPwKjY68mL//EABwQAAMAAQUAAAAAAAAAAAAAAAABEUEhgaGx8P/aAAgBAQABPyF0BkwRfQ34LVx2VBPTJ//aAAwDAQACAAMAAAAQkP8A/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAIAQMBAT8QV//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQACAgMBAQAAAAAAAAAAAAEAESExUWGRQXH/2gAIAQEAAT8Qxcg0BpOCV5fEAS6n6IaTQGV+O1nX9l4vTBnU/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx\",\n \"title\": \"mdx\",\n \"src\": \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg\",\n \"srcSet\": [\"/static/d05de4079d8f8d2d5da278caa9974616/fca29/mdx.jpg 259w\", \"/static/d05de4079d8f8d2d5da278caa9974616/cabe9/mdx.jpg 373w\"],\n \"sizes\": \"(max-width: 373px) 100vw, 373px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u5728\\u8BED\\u6CD5\\u6269\\u5C55\\u4E2D\\u627E\\u5230\\u4ED3\\u5E93\\u5730\\u5740\\uFF0C\\u4E00\\u822C\\u90FD\\u662F\\u5F00\\u6E90\\u7684\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"855px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"47.87644787644788%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDAgX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHmS3MYw//EABcQAAMBAAAAAAAAAAAAAAAAAAECEDH/2gAIAQEAAQUCZi1MO//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAAMAAAAAAAAAAAAAAAAAACAhMf/aAAgBAQAGPwJ0v//EABgQAAIDAAAAAAAAAAAAAAAAAAERECCB/9oACAEBAAE/ISjMYUKm/9oADAMBAAIAAwAAABAQD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABwQAQACAQUAAAAAAAAAAAAAAAEAESEQMXGRof/aAAgBAQABPxBghQLp4I5d7jRqzuABxpguCf/Z')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx2\",\n \"title\": \"mdx2\",\n \"src\": \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg\",\n \"srcSet\": [\"/static/7a5b47d73598c8d459c7cd5845570ed1/fca29/mdx2.jpg 259w\", \"/static/7a5b47d73598c8d459c7cd5845570ed1/f4507/mdx2.jpg 518w\", \"/static/7a5b47d73598c8d459c7cd5845570ed1/ad316/mdx2.jpg 855w\"],\n \"sizes\": \"(max-width: 855px) 100vw, 855px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u627E\\u5230\\u7C7B\\u4F3C\\u6587\\u4EF6\\u76EE\\u5F55\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\uFF0C\\u653E\\u5230\\u4E4B\\u524D\\u90A3\\u4E9B\\u8BED\\u6CD5\\u9879\\u76EE\\u65C1\\u8FB9\\uFF0C\\u5F15\\u5165\\u8FDB\\u6765\\u5C31\\u884C\\u4E86\\u3002\\n\", mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"738px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.02316602316603%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe82Sgf/xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAZEAABBQAAAAAAAAAAAAAAAAABEBEgMUH/2gAIAQEAAT8hD7A2n//aAAwDAQACAAMAAAAQY8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAYEAEBAQEBAAAAAAAAAAAAAAABACExEP/aAAgBAQABPxAgcRi+PJplY5f/2Q==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"mdx3\",\n \"title\": \"mdx3\",\n \"src\": \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg\",\n \"srcSet\": [\"/static/e3579ff072577ca018f55763bc10f94f/fca29/mdx3.jpg 259w\", \"/static/e3579ff072577ca018f55763bc10f94f/f4507/mdx3.jpg 518w\", \"/static/e3579ff072577ca018f55763bc10f94f/8fbf5/mdx3.jpg 738w\"],\n \"sizes\": \"(max-width: 738px) 100vw, 738px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")))), mdx(\"p\", null, \"so easy...\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6211\\u4E4B\\u524D\\u505A\\u7684\\u4E00\\u5927\\u5806\\u8BED\\u8A00\\u4F7F\\u7528\\u7684\\u5E76\\u4E0D\\u662F vscode \\u7684\\uFF0C\\u7136\\u540E\\u5F15\\u7528vscode\\u7684\\u8BED\\u6CD5\\u9879\\u76EE\\u8FDB\\u6765\\u540E\\u6B7B\\u6D3B\\u6CA1\\u529E\\u6CD5\\u6E32\\u67D3\\u51FA\\u6765\\uFF0C\\u7ED3\\u679C\\u53D1\\u73B0\\u8BED\\u6CD5\\u5E76\\u4E0D\\u662F\\u4E25\\u683C\\u552F\\u4E00\\u7684\\uFF0C\\u6BD4\\u5982 js \\u7684\\u9AD8\\u4EAE\\u8BED\\u6CD5 scope \\u6709\\u4E9B\\u53EB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"source.jsx\"), \"\\uFF0C\\u6709\\u4E9B\\u5374\\u53EB \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"source.js.jsx\"), \"\\uFF0C\\u8FD9\\u6837\\u5C31\\u4F1A\\u5BFC\\u81F4\\u8BED\\u8A00\\u5F15\\u7528\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"missmatch\"), \"\\u3002\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"8816fcee-6764-51e5-a1c0-40f9e0fd5a32","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/prebundle/prebundle.md","id":"002e6cce-b11e-504d-9bcb-85a3af87ca5c","parent":{"name":"prebundle","sourceInstanceName":"blog"},"excerpt":"⚡想分享的是 webpack 中使用依赖预编译的手段优化编译环节，优化开发环境下的体验。从用缓存降低二次编译时间，到第三方依赖的预编译方案的需求和实践讨论，到具体的实际落地。 ps: 无论是 webpack4 的内存缓存、 hard-source-webpack-plugin 还是 webpack5 内置完善的 cache 方案，都能够在开发环境下将二次编译压缩到我们能够接受的时间，这篇文章的目的更多是在持久化缓存的基础上，探索更少的编译时间。 static_sites…","fields":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","slug":"/blog/prebundle","description":"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。","date":"2022-05-25","redirects":null,"datetime":"2022-05-25 11:09:40","categories":["code"],"series":null,"tags":["整理","功能","Webpack","prebundle"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","功能","Webpack","prebundle"],"theme":null,"slug":"prebundle","date":"2022-05-25 11:09:40"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"prebundle\",\n \"title\": \"⚡ 优化 webpack 开发体验以及依赖预编译方案\",\n \"date\": \"2022-05-25 11:09:40\",\n \"author\": \"Ubug\",\n \"description\": \"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"功能\", \"Webpack\", \"prebundle\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u26A1\\u60F3\\u5206\\u4EAB\\u7684\\u662F webpack \\u4E2D\\u4F7F\\u7528\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u7684\\u624B\\u6BB5\\u4F18\\u5316\\u7F16\\u8BD1\\u73AF\\u8282\\uFF0C\\u4F18\\u5316\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7684\\u4F53\\u9A8C\\u3002\\u4ECE\\u7528\\u7F13\\u5B58\\u964D\\u4F4E\\u4E8C\\u6B21\\u7F16\\u8BD1\\u65F6\\u95F4\\uFF0C\\u5230\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u9884\\u7F16\\u8BD1\\u65B9\\u6848\\u7684\\u9700\\u6C42\\u548C\\u5B9E\\u8DF5\\u8BA8\\u8BBA\\uFF0C\\u5230\\u5177\\u4F53\\u7684\\u5B9E\\u9645\\u843D\\u5730\\u3002\"), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"ps: \\u65E0\\u8BBA\\u662F webpack4 \\u7684\\u5185\\u5B58\\u7F13\\u5B58\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u8FD8\\u662F webpack5 \\u5185\\u7F6E\\u5B8C\\u5584\\u7684 cache \\u65B9\\u6848\\uFF0C\\u90FD\\u80FD\\u591F\\u5728\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u5C06\\u4E8C\\u6B21\\u7F16\\u8BD1\\u538B\\u7F29\\u5230\\u6211\\u4EEC\\u80FD\\u591F\\u63A5\\u53D7\\u7684\\u65F6\\u95F4\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u7684\\u76EE\\u7684\\u66F4\\u591A\\u662F\\u5728\\u6301\\u4E45\\u5316\\u7F13\\u5B58\\u7684\\u57FA\\u7840\\u4E0A\\uFF0C\\u63A2\\u7D22\\u66F4\\u5C11\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u3002\")), mdx(\"p\", null, \"static_sites \\u9879\\u76EE\\u662F\\u4F5C\\u4E3A\\u5F88\\u591A\\u5C0F\\u9879\\u76EE\\u7684\\u96C6\\u5408\\uFF0C\\u76EE\\u7684\\u662F\\u56E0\\u4E3A\\u4EE5\\u524D\\u6BCF\\u4E2A\\u9879\\u76EE\\u90FD\\u5F00\\u4E2A\\u4ED3\\u5E93\\uFF0CNode\\u3001\\u4F9D\\u8D56\\u4E4B\\u7C7B\\u7684\\u5347\\u7EA7\\uFF0C\\u5BFC\\u81F4\\u5F88\\u96BE\\u7EF4\\u62A4\\uFF0C\\u6240\\u4EE5\\u540E\\u6765\\u5C31\\u521B\\u5EFA\\u4E86\\u8FD9\\u4E2A\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u867D\\u7136\\u6574\\u4E2A\\u9879\\u76EE\\u6CA1\\u6709\\u591A\\u590D\\u6742\\uFF0C\\u4E0D\\u50CF\\u662F\\u5F88\\u591A\\u4E00\\u7EBF\\u516C\\u53F8\\u6570\\u767E\\u4E2A\\u9875\\u9762\\u90A3\\u79CD\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u6D89\\u53CA\\u5230\\u51E0\\u5341\\u4E2A\\u5C0F\\u9879\\u76EE\\uFF0C\\u6709\\u975E\\u5E38\\u591A\\u7684\\u4F9D\\u8D56\\uFF0C\\u622A\\u6B62\\u5230\\u5F53\\u524D\\u5DF2\\u7ECF\\u5C06\\u8FD1\\u4E0A\\u4E07\\u7684\\u7F16\\u8BD1\\u6A21\\u5757\\u6570\\u91CF\\u4E86\\uFF0C\\u5F00\\u53D1\\u548C\\u6253\\u5305\\u65F6\\u95F4\\u5728\\u5355\\u673A\\u4E0A\\u5DF2\\u7ECF\\u5F88\\u5F71\\u54CD\\u4F53\\u9A8C\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u540E\\u6765\\u4F18\\u5316\\u4E86\\u4E00\\u6B21\\uFF0C\\u5F15\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u7684\\u5F3A\\u5236\\u7F13\\u5B58\\u7B56\\u7565\\uFF0C\\u5728\\u6CA1\\u6709\\u7279\\u522B\\u5927\\u7F13\\u5B58\\u53D8\\u52A8\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u5305\\u62EC\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u76848000\\u4E2A\\u6A21\\u5757\\u9996\\u6B21\\u7F16\\u8BD1\\u8017\\u65F650s\\uFF0C\\u4E8C\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6\\u63A7\\u5236\\u5728\\u4E8615s\\u4EE5\\u5185\\uFF0C\\u70ED\\u66F4\\u65B0\\u5F71\\u54CD\\u4E0D\\u5927\\uFF0C\\u6240\\u4EE5\\u6CA1\\u7279\\u522B\\u7559\\u610F\\u3002\\u4ECE\\u5934\\u7684\\u6253\\u5305\\u65F6\\u95F4\\u4ECD\\u7136\\u5F88\\u96BE\\u770B\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u597D\\u4F46\\u662F\\u8FD8\\u662F\\u4E0D\\u591F\\u597D\\u3002\\u6BCF\\u6B21\\u5F00\\u53D1\\u73AF\\u5883\\u542F\\u52A8\\u90FD\\u9700\\u8981\\u90A3\\u4E48\\u4E45\\u65F6\\u95F4\\uFF0C\\u6BCF\\u6B21\\u542F\\u52A8\\u9879\\u76EE\\u6572\\u5B8C\\u547D\\u4EE4\\u8FD8\\u8981\\u7B49\\u4E2A\\u51E0\\u5341\\u79D2\\uFF1FNo Way....\\u3002\"), mdx(\"p\", null, \"\\u9664\\u4E86\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4E5F\\u505A\\u4E86\\u4E00\\u4E2A\\u63D2\\u4EF6\\u6765\\u663E\\u793A\\u4E0D\\u540C entry \\u7684\\u7F16\\u8BD1\\u8FDB\\u5EA6\\uFF0C\\u5206\\u6790\\u663E\\u793A\\u4E0A\\u4E07\\u4E2A\\u6A21\\u5757\\u7684\\u7F16\\u8BD1\\u8FDB\\u5EA6\\u3001\\u5173\\u952E\\u8017\\u65F6\\u6A21\\u5757\\u3001\\u8017\\u65F6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7B49\\uFF0C\\u5206\\u6790\\u4E86\\u4E0B\\u786E\\u5B9E\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5360\\u7528\\u4E86\\u5F88\\u591A\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\uFF0C\\u662F\\u65F6\\u5019\\u505A\\u70B9\\u4EC0\\u4E48\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5148\\u770B\\u7ED3\\u679C\\uFF08\\u5747\\u4E3A\\u5F00\\u53D1\\u73AF\\u5883\\uFF09\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// ========== \\u4EC5 webpack5 + inner cache system\\n\\u9996\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6:\\nsetup 85ms\\nbuilding 97921ms\\nsealing 3279ms\\nemitting 393ms\\n\\n\\u4E8C\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6:\\nsetup 27ms\\nbuilding 11231ms\\nsealing 1351ms\\nemitting 70ms\\n\\n// ========== \\u914D\\u7F6E prebundle \\u673A\\u5236\\n\\n\\u65E0\\u7F13\\u5B58\\u7F16\\u8BD1 49s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\\u4E09\\u6B21\\u7F16\\u8BD1 10s\\n\\n// ========== \\u5C06 prebundle \\u540C\\u6B65\\u5230\\u53E6\\u4E00\\u53F0\\u673A\\u5668\\n\\n\\u5E26\\u7F13\\u5B58\\u7F16\\u8BD1 12s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\")), mdx(\"h2\", null, \"\\u4E00\\u3001webpack5\"), mdx(\"p\", null, \"\\u4E4B\\u524D CRA \\u81EA\\u5E26\\u7684\\u662F webpack4\\uFF0Cwebpack5 \\u5DF2\\u7ECF\\u53D1\\u5E03\\u4E86\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u4E86\\uFF0C\\u6574\\u4E2A\\u793E\\u533A\\u89C2\\u671B\\u4E5F\\u8DB3\\u591F\\u4E86\\uFF0C\\u60F3\\u7740\\u80FD\\u4E0D\\u80FD\\u8FC1\\u79FB\\u8FC7\\u53BB\\uFF0C\\u4E00\\u662F\\u4E3A\\u4E86\\u4F18\\u5316\\u7F16\\u8BD1\\u7684\\u901F\\u5EA6\\u548C\\u4F53\\u9A8C\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E5F\\u662F\\u4E3A\\u4E86\\u9002\\u914D\\u6700\\u65B0\\uFF0C\\u4EE5\\u4FBF\\u4EE5\\u540E\\u957F\\u671F\\u7684\\u4F7F\\u7528\\u3002\"), mdx(\"p\", null, \"webpack5 \\u76F8\\u6BD4 4 \\u8F83\\u5927\\u7684\\u63D0\\u5347\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5185\\u7F6E\\u7684\\u589E\\u52A0\\u6301\\u4E45\\u5316\\u7F13\\u5B58\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u66F4\\u7A33\\u5B9A\\u7684 hash \\u5B9E\\u73B0\\u6709\\u6548\\u7684\\u957F\\u671F\\u7F13\\u5B58\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u66F4\\u597D\\u7684 Tree Shaking \\u548C\\u4EE3\\u7801\\u751F\\u6210\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5185\\u7F6E\\u793E\\u533A\\u975E\\u5E38\\u591A\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F18\\u5316\\u6280\\u672F\\u67B6\\u6784\\u4EE5\\u4FBF\\u4EE5\\u540E\\u66F4\\u597D\\u7684\\u6269\\u5C55\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u65B0\\u7279\\u6027\\uFF1A\\u6A21\\u5757\\u8054\\u90A6\\u3001\\u5185\\u7F6E\\u8D44\\u6E90 loader\\u3001\\u5185\\u7F6E worker loader\\u3001\\u5185\\u7F6E json loader\\u3001\\u81EA\\u52A8\\u5904\\u7406 WebAssembly \\u7B49\\u5F02\\u6B65\\u6A21\\u5757\\u3001import \\u652F\\u6301 URI \\u534F\\u8BAE\\u3001\\u8FDB\\u5EA6\\u663E\\u793A\\u4F18\\u5316\")), mdx(\"p\", null, \"\\u6240\\u4EE5 webpack5 \\u786E\\u5B9E\\u5185\\u7F6E\\u89E3\\u51B3\\u4E86\\u4E4B\\u524D\\u6211\\u4EEC\\u9047\\u5230\\u7684\\u4E00\\u4E9B\\u8FEB\\u5207\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A eject \\u51FA\\u6765\\u7684\\u914D\\u7F6E\\uFF0C\\u6240\\u4EE5\\u5C06\\u9879\\u76EE\\u5DE5\\u5177\\u4F9D\\u8D56\\u5347\\u7EA7\\u82B1\\u8D39\\u4E86\\u70B9\\u65F6\\u95F4\\u3002\\u6700\\u540E\\u7ED3\\u679C\\u8BF4\\u5B9E\\u8BDD\\u5E76\\u6CA1\\u6709\\u63D0\\u5347\\u591A\\u4E48\\u660E\\u663E\\uFF0C\\u7F13\\u5B58\\u53EA\\u662F\\u66FF\\u6362\\u4E86\\u5916\\u90E8\\u7684\\u65B9\\u6848\\uFF0C\\u5F88\\u591A\\u6700\\u4F73\\u5B9E\\u8DF5\\u4E5F\\u5E76\\u6CA1\\u6709\\u628A\\u7F16\\u8BD1\\u65B9\\u6848\\u53D8\\u9769\\u591A\\u5938\\u5F20\\uFF0C\\u6700\\u5173\\u5FC3\\u7684\\u7F16\\u8BD1\\u903B\\u8F91\\u4ECD\\u7136\\u662F babel \\u7F16\\u8BD1\\u4E00\\u5207\\u3002\"), mdx(\"p\", null, \"\\u7F16\\u8BD1\\u65F6\\u95F4\\u56E0\\u4E3A webpack4 hack \\u4E86\\u4E00\\u4E9B\\u6301\\u4E45\\u903B\\u8F91\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u63D0\\u5347\\u6CA1\\u90A3\\u4E48\\u660E\\u663E\\u3002\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u6301\\u4E45\\u7F13\\u5B58\\u903B\\u8F91\\u7F13\\u5B58\\u7684\\u90FD\\u662F\\u8FC7\\u7A0B\\u4EE3\\u7801\\uFF0C\\u6240\\u4EE5\\u6CA1\\u6709\\u5171\\u4EAB\\u591A\\u53F0\\u673A\\u5668\\u7684\\u529E\\u6CD5\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001esbuild \\u4ECB\\u5165\"), mdx(\"p\", null, \"esbuild \\u5DF2\\u7ECF\\u53D1\\u5E03\\u5F88\\u4E45\\u4E86\\uFF0C\\u5BF9\\u7F16\\u8BD1\\u7684\\u4F18\\u5316\\u4E5F\\u662F\\u6BCB\\u5EB8\\u7F6E\\u7591\\u7684\\uFF0C\\u9664\\u4E86\\u6CA1\\u529E\\u6CD5\\u548C webpack \\u8FD9\\u79CD\\u5927\\u800C\\u5168\\u4E14\\u5386\\u7ECF\\u5927\\u89C4\\u6A21\\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\u76F8\\u6BD4\\uFF0C\\u6BD5\\u7ADF\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u88AB webpack \\u7684\\u751F\\u6001\\u517B\\u5201\\u4E86\\u7684\\u624B\\uFF0C\\u8FD8\\u662F\\u60F3\\u8981\\u4EC0\\u4E48\\u90FD\\u6709\\u73B0\\u6210\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5355\\u72EC\\u4F7F\\u7528 esbuild \\u4F5C\\u4E3A bundler \\u6253\\u5305\\u5668\\u6765\\u8BF4\\uFF0C\\u5F88\\u591A\\u6587\\u4EF6\\u7C7B\\u578B\\u4E0D\\u652F\\u6301\\u3001\\u4E0D\\u652F\\u6301 code splite\\u3001ast \\u7F3A\\u5931\\u7B49\\u7B49\\uFF0C\\u76F4\\u63A5\\u7528\\u6765\\u7F16\\u8BD1\\u9879\\u76EE\\u76EE\\u524D\\u8FD8\\u662F\\u4E0D\\u592A\\u53CB\\u597D\\u7684\\uFF0C\\u800C\\u4E14\\u9879\\u76EE\\u4E2D\\u7528\\u4E86\\u5F88\\u591A webpack \\u63D2\\u4EF6\\uFF0Cesbuild \\u751F\\u6001\\u76F4\\u63A5\\u5207\\u6362\\u8FD8\\u662F\\u6709\\u96BE\\u5EA6\\u7684\\u3002\"), mdx(\"p\", null, \"esbuild \\u901A\\u8FC7\\u5F7B\\u5E95\\u653E\\u5F03\\u5BF9cjs tree shaking\\u7684\\u652F\\u6301\\u6765\\u66F4\\u597D\\u7684\\u517C\\u5BB9cjs\\uFF0C\\u5E76\\u4E14\\u540C\\u65F6\\u53EF\\u4EE5\\u5728\\u4E0D\\u5F15\\u5165\\u63D2\\u4EF6\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u76F4\\u63A5\\u4F7F\\u5F97web bundler\\u4E0B\\u652F\\u6301cjs\\u3002\"), mdx(\"p\", null, \"esbuild \\u6709\\u4E09\\u4E2A\\u5177\\u4F53\\u7684\\u529F\\u80FD\\u65B9\\u5411\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u5668: bundler\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7F16\\u8BD1\\u5668: transformer\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u538B\\u7F29\\u5668: minifier\")), mdx(\"p\", null, \"\\u7F16\\u8BD1\\u5668\\u3001\\u538B\\u7F29\\u5668\\u8FD9\\u90E8\\u5206\\u5DE5\\u4F5C\\u53EF\\u4EE5\\u4F7F\\u7528 esbuild-loader \\u6765\\u52A0\\u901F webpack \\u91CC\\u9762\\u7684\\u65E7\\u903B\\u8F91\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"node \\u73AF\\u5883\\u4E0B\\u7684 prebundle \\u662F\\u4E00\\u4E2A\\u4E0D\\u540C\\u7684\\u95EE\\u9898\\uFF0C\\u8FD9\\u91CC\\u53EA\\u662F\\u8BB2 web \\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7684\\u65B9\\u6848\\u3002\")), mdx(\"p\", null, \"\\u592A\\u957F\\u4E0D\\u770B\\uFF1A\\u5C06\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6574\\u4F53\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u5C0F\\u5FC3\\u5904\\u7406\\u4F9D\\u8D56\\u5171\\u4EAB\\u3001\\u5FAA\\u73AF\\u548C\\u4E92\\u76F8\\u4F9D\\u8D56\\u95EE\\u9898\\uFF0C\\u7136\\u540E\\u8BA9\\u6253\\u5305\\u5DE5\\u5177\\u5728\\u5F00\\u53D1\\u9636\\u6BB5\\u76F4\\u63A5\\u4F7F\\u7528\\u63D0\\u524D\\u6253\\u5305\\u7684\\u4EA7\\u7269\\uFF0C\\u8DF3\\u8FC7\\u5197\\u957F\\u7684\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6253\\u5305\\u8FC7\\u7A0B\\uFF0C\\u53EA\\u7F16\\u8BD1\\u6253\\u5305\\u4E1A\\u52A1\\u4EE3\\u7801\\uFF0C\\u8282\\u7701\\u5F00\\u53D1\\u6A21\\u5F0F\\u4E0B\\u7684\\u6574\\u4F53\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u5728\\u7F16\\u8BD1\\u8017\\u65F6\\u4F18\\u5316\\u65B9\\u9762\\uFF0C\\u6709\\u5F88\\u591A\\u793E\\u533A\\u63A2\\u7D22\\uFF0C\\u57FA\\u672C\\u4E0A\\u90FD\\u662F\\u5BF9\\u6253\\u5305\\u4F53\\u79EF\\u3001\\u672C\\u5730\\u786C\\u76D8\\u7F13\\u5B58\\u3001\\u5185\\u5B58\\u7F13\\u5B58\\u3001\\u7F16\\u8BD1\\u5B89\\u5168\\u3001\\u7F13\\u5B58\\u6709\\u6548\\u671F\\u7B49\\u4E4B\\u95F4\\u7684\\u5E73\\u8861\\uFF0Cwebpack \\u672C\\u8EAB\\u4E5F\\u662F\\u4E00\\u4E2A\\u5F02\\u5E38\\u5F00\\u653E\\u7684\\u67B6\\u6784\\uFF0C\\u5141\\u8BB8\\u8FD9\\u4E9B\\u5B9E\\u8DF5\\u7684\\u767E\\u82B1\\u9F50\\u653E\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u5BF9\\u9879\\u76EE\\u7F16\\u8BD1\\u4F18\\u5316\\u7684\\u65F6\\u5019\\uFF0C\\u5C06\\u6A21\\u5757\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u5355\\u72EC\\u5206\\u6790\\u4E86\\u4E00\\u4E0B\\uFF0C\\u7F16\\u8BD1\\u65F6\\u95F4\\u8D85\\u8FC7 1s \\u7684\\u4F9D\\u8D56\\u90FD\\u8BE6\\u5C3D\\u7684\\u8BB0\\u5F55\\u4E86\\u4E0B\\u6765\\uFF0C\\u53D1\\u73B0\\u6709\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5728\\u5F00\\u53D1\\u73AF\\u5883\\u542F\\u52A8\\u7684\\u65F6\\u5019\\u7F16\\u8BD1\\u633A\\u8017\\u65F6\\u7684\\uFF0C\\u4E00\\u76F4\\u60F3\\u7740\\u8FD9\\u5757\\u600E\\u4E48\\u80FD\\u4F18\\u5316\\u4E00\\u4E0B\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u4E3A\\u4EC0\\u4E48\\u8981\\u7F16\\u8BD1\\u5462\\uFF1F\\u56E0\\u4E3A\\u6211\\u4EEC\\u4F7F\\u7528\\u4E86\\u4ED6\\u7684 export \\u5BFC\\u51FA\\uFF0C\\u4E0D\\u50CF\\u662F\\u5F88\\u4E45\\u4E4B\\u524D\\u4E00\\u4E2A min \\u6587\\u4EF6\\u5F15\\u5165\\u5373\\u53EF\\uFF0C\\u73B0\\u4EE3\\u7684\\u6253\\u5305\\u624B\\u6BB5\\u80FD\\u591F\\u5206\\u6790\\u51FA\\u7528\\u5230\\u4E86\\u54EA\\u4E9B\\u3001\\u6CA1\\u7528\\u54EA\\u4E9B\\u5BFC\\u51FA\\uFF0C\\u6309\\u9700\\u6253\\u5305\\uFF0C\\u6700\\u540E\\u751F\\u6210\\u4EE3\\u7801\\u7684\\u65F6\\u5019\\u751A\\u81F3\\u80FD\\u591F tree-shaking \\u6389\\u6CA1\\u7528\\u7684\\u4EE3\\u7801\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u5BF9\\u6253\\u5305\\u4F53\\u79EF\\u7684\\u4F18\\u5316\\u3002\\u6BD4\\u5982\\u6574\\u4E2A Antd \\u6216\\u8005 lodash \\u4E4B\\u7C7B\\u7684\\u5E93\\u6216\\u8005\\u6846\\u67B6\\uFF0C\\u5982\\u679C\\u4E0D\\u5F15\\u5165\\u4F9D\\u8D56\\u5206\\u6790\\uFF0C\\u76F4\\u63A5\\u5168\\u90E8\\u6253\\u5305\\u7684\\u8BDD\\uFF0C\\u90A3\\u5305\\u4F53\\u79EF\\u5C06\\u4F1A\\u7206\\u70B8\\u7684\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u6211\\u4EEC\\u8FD8\\u53EF\\u4EE5\\u4ECE\\u6E90\\u7801\\u51FA\\u53D1\\u7F16\\u8BD1\\u51FA\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u5E73\\u53F0\\u9002\\u914D\\u4EE3\\u7801\\uFF0C\\u751F\\u6210\\u7684\\u8D44\\u6E90\\u66F4\\u53EF\\u63A7\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7F16\\u8BD1\\u8017\\u65F6\\u7684\\u95EE\\u9898\\u5BF9\\u4E8E\\u5927\\u578B\\u9879\\u76EE\\u786E\\u786E\\u5B9E\\u5B9E\\u662F\\u4E2A\\u95EE\\u9898\\uFF0C\\u6BD5\\u7ADF\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\uFF0C\\u901F\\u5EA6\\u6BD4\\u4F53\\u79EF\\u66F4\\u4F18\\u5148\\uFF0C\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5728\\u5F00\\u53D1\\u671F\\u95F4\\u5E76\\u4E0D\\u9700\\u8981 tree-shaking\\uFF0C\\u4EE3\\u7801\\u51E0\\u4E4E\\u4E0D\\u4F1A\\u53D8\\u52A8\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u7528\\u6700\\u5FEB\\u6700\\u7B80\\u5355\\u7684\\u63D0\\u524D\\u6253\\u5305\\u5462\\uFF1F\"), mdx(\"h4\", null, \"2.1 \\u7F16\\u8BD1\\u7F13\\u5B58\\u4E0D\\u591F\\u597D\\u5417\"), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u662F webpack4 \\u7684\\u5185\\u5B58\\u7F13\\u5B58\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u8FD8\\u662F webpack5 \\u5185\\u7F6E\\u5B8C\\u5584\\u7684 cache \\u65B9\\u6848\\uFF0C\\u90FD\\u80FD\\u591F\\u6781\\u5927\\u7684\\u5C06\\u4E8C\\u6B21\\u7F16\\u8BD1\\u538B\\u7F29\\u5230\\u6781\\u81F4\\uFF0C\\u5728\\u7F13\\u5B58\\u5B89\\u5168\\u548C\\u6027\\u80FD\\u4E0A\\u90FD\\u80FD\\u591F\\u6EE1\\u8DB3\\u6211\\u4EEC\\u7684\\u4F7F\\u7528\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u7167\\u7740\\u73B0\\u5728\\u56FD\\u5185\\u793E\\u533A\\u7684\\u67B6\\u52BF\\u80AF\\u5B9A\\u6709\\u4EBA\\u8BF4\\uFF1A\\u4F60\\u8FD9\\u5565\\u90FD\\u4E0D\\u61C2\\uFF0C\\u751F\\u4EA7\\u73AF\\u5883\\u7F16\\u8BD1\\u4F53\\u9A8C\\u4E0D\\u91CD\\u8981\\uFF0C\\u7F16\\u8BD1\\u8D85\\u8FC7 30 \\u5206\\u949F\\u4E0A CI/CD \\u554A\\u3001\\u5B8C\\u5584\\u5236\\u54C1\\u7BA1\\u7406\\u6D41\\u7A0B\\uFF0C\\u5347\\u7EA7\\u6253\\u5305\\u670D\\u52A1\\u5668 CPU \\u554A\\u3002\\u9879\\u76EE\\u81A8\\u80C0\\uFF1F\\u90A3\\u662F\\u4F60\\u9879\\u76EE\\u4E0D\\u5BF9\\u3002\\u5F00\\u53D1\\u4F53\\u9A8C\\u6709\\u7F13\\u5B58\\u5C31\\u591F\\u4E86\\u3002\\u9884\\u7F16\\u8BD1\\u6CA1\\u7528\\uFF0C\\u6309\\u9700\\u7F16\\u8BD1\\u624D\\u5BF9\\u3002\\u73B0\\u5728\\u6CA1\\u6761\\u4EF6\\uFF0C\\u90A3\\u7B49\\u793E\\u533A\\u5B8C\\u5584\\u554A\\u3002\\u5FAE\\u5E94\\u7528\\u6A21\\u5757\\u62C6\\u5206\\u5355\\u72EC\\u6253\\u5305\\u4E5F\\u6CA1\\u610F\\u4E49\\u3002\\u4F60\\u673A\\u5668\\u4E0D\\u884C\\u3001\\u516C\\u53F8\\u57FA\\u5EFA\\u4E0D\\u884C\\u3001\\u516C\\u53F8\\u6846\\u67B6\\u4E0D\\u884C\\uFF0C\\u4F60\\u53BB\\u7814\\u7A76xxx\\u5427\\u3001\\u4F60\\u7406\\u89E3\\u6709\\u95EE\\u9898\\u3001\\u4F60\\u591A\\u5199\\u70B9\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u975E\\u5E38\\u591A\\u7684\\u5730\\u65B9\\u7684\\u8BA8\\u8BBA\\u6C14\\u6C1B\\u90FD\\u7279\\u522B\\u8BA9\\u4EBA\\u611F\\u89C9\\u8FDB\\u4E86\\u65E9\\u5E74 QQ \\u7FA4\\uFF0C\\u53CD\\u6B63\\u597D\\u50CF\\u662F\\u53EA\\u8981\\u6CA1\\u9047\\u5230\\u7684\\u95EE\\u9898\\uFF0C\\u522B\\u4EBA\\u5C31\\u4E0D\\u5E94\\u8BE5\\u6298\\u817E\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u4EBA\\u603B\\u662F\\u4E0D\\u77E5\\u8DB3\\uFF0C\\u4EC0\\u4E48\\u90FD\\u60F3\\u8981\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7F13\\u5B58\\u4ECD\\u7136\\u9700\\u8981\\u4E00\\u4E2A\\u8017\\u65F6\\u7684\\u9996\\u6B21\\u7F16\\u8BD1\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9ED1\\u76D2\\u7684\\u8FC7\\u7A0B\\u7F13\\u5B58\\u6CA1\\u6709\\u4EE3\\u7801\\u7EA7\\u610F\\u4E49\\uFF0C\\u81EA\\u7136\\u4E5F\\u5F88\\u96BE\\u5171\\u4EAB\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u751F\\u4EA7\\u73AF\\u5883\\u65E0\\u6CD5\\u6536\\u76CA\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6709\\u6BD4 webpack \\u66F4\\u5FEB\\u7684\\u7F16\\u8BD1\\u65B9\\u6CD5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u66F4\\u5C0F\\u7684\\u5185\\u5B58\\u5360\\u7528\")), mdx(\"h3\", null, \"2.1 \\u4E4B\\u524D\\u7684\\u76F8\\u4F3C\\u65B9\\u6848\"), mdx(\"h4\", null, \"DLLPlugin\"), mdx(\"p\", null, \"DllPlugin \\u7B97\\u662F\\u52A8\\u6001\\u94FE\\u63A5\\u7684\\u5B9E\\u73B0\\uFF0C\\u80FD\\u591F\\u901A\\u8FC7\\u914D\\u7F6E\\uFF0C\\u5C06\\u7B2C\\u4E09\\u65B9\\u7684\\u4F9D\\u8D56\\u5355\\u72EC\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u751F\\u6210\\u7D22\\u5F15\\u5173\\u7CFB\\uFF0C\\u7136\\u540E\\u4EA4\\u7ED9 webpack \\u6765\\u8DF3\\u8FC7\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u6253\\u5305\\uFF0C\\u80FD\\u591F\\u8282\\u7701\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u9891\\u7E41\\u5904\\u7406\\uFF0C\\u5B9E\\u9645\\u8BC1\\u660E\\u4E5F\\u786E\\u5B9E\\u80FD\\u591F\\u6781\\u5927\\u7684\\u4F18\\u5316\\u7F16\\u8BD1\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u591A\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u5305\\u62EC React \\u548C Vue \\u90FD\\u653E\\u5F03\\u4E86 DLL\\uFF0C\\u6240\\u4EE5\\u597D\\u591A\\u4EBA\\u90FD\\u8BF4 DLL \\u662F\\u8FC7\\u53BB\\u65F6\\uFF0C\\u4E0D\\u80FD\\u518D\\u7528\\u4E86\\u3002\\u6211\\u5012\\u89C9\\u5F97\\u53EA\\u662F\\u65B9\\u6848\\u4E0D\\u540C\\uFF0C\\u6709\\u4E9B\\u65B9\\u6848\\u662F\\u5C06\\u7F16\\u8BD1\\u7ED3\\u679C\\u7F13\\u5B58\\u4ECE\\u800C\\u8DF3\\u8FC7\\u9891\\u7E41\\u7F16\\u8BD1\\uFF0CDLL \\u662F\\u5C06\\u7F16\\u8BD1\\u7ED3\\u679C\\u751F\\u6210\\u5230\\u4E86 bundle\\uFF0C\\u90FD\\u662F\\u80FD\\u591F\\u4F18\\u5316\\u7F16\\u8BD1\\u65F6\\u95F4\\u7684\\uFF0C\\u4E00\\u4E2A\\u7F13\\u5B58\\u4E86\\u8FC7\\u7A0B\\u9ED1\\u76D2\\uFF0C\\u4E00\\u4E2A\\u7F13\\u5B58\\u4E86\\u6700\\u7EC8\\u7ED3\\u679C\\uFF0C\\u4E24\\u4E2A\\u4E0D\\u540C\\u7684\\u6280\\u672F\\u7F13\\u5B58\\u65B9\\u5411\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F DllPlugin \\u8FD8\\u662F\\u5B58\\u5728\\u8F83\\u591A\\u95EE\\u9898\\u7684\\uFF0C\\u901A\\u7528\\u6027\\u4E0D\\u597D\\u3001\\u914D\\u7F6E\\u590D\\u6742\\uFF0C\\u4F9D\\u8D56\\u4E0D\\u597D\\u5904\\u7406\\u3001\\u6D41\\u7A0B\\u4FB5\\u5165\\u5F3A\\u7B49\\uFF0C\\u65E0\\u6CD5\\u6309\\u9700\\u52A0\\u8F7D\\uFF0C\\u591A\\u5E94\\u7528\\u65E0\\u6CD5\\u5171\\u7528\\uFF0C\\u7F3A\\u4E4F\\u52A8\\u6001\\u6027\\u7684\\u7279\\u70B9\\u3002\\u5B9E\\u9645\\u7528 DLL \\u6765\\u505A\\u4E3B\\u8981\\u4F18\\u5316\\u624B\\u6BB5\\u7684\\u56E2\\u961F\\u8D8A\\u6765\\u8D8A\\u5C11\\u4E86\\uFF0C\\u6CA1\\u5FC5\\u8981\\u82B1\\u592A\\u591A\\u7CBE\\u529B\\u6263\\u4E00\\u4E2A\\u590D\\u6742\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"h4\", null, \"\\u4F9D\\u8D56\\u56FE\"), mdx(\"p\", null, \"\\u4E0D\\u540C\\u53EB\\u6CD5\\u5427\\uFF0C\\u6709\\u4E9B\\u53EB ModuleGraph\\u3001ModuleMap \\u7B49\\u7B49\\uFF0C\\u8FD9\\u79CD\\u4E4B\\u524D\\u5927\\u5382\\u6BD4\\u8F83\\u559C\\u6B22\\u7684\\u65B9\\u6848\\uFF0C\\u4E5F\\u57FA\\u672C\\u4E0A\\u5185\\u90E8\\u5DE5\\u5177\\u90FD\\u6709\\u5404\\u81EA\\u7684\\u5B9E\\u73B0\\uFF0C\\u5177\\u4F53\\u6838\\u5FC3\\u7684\\u65B9\\u6CD5\\u4E5F\\u662F\\u7EC6\\u5316\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u8FD0\\u884C\\u65F6\\u6309\\u9700\\u52A0\\u8F7D\\u3002\"), mdx(\"p\", null, \"\\u5904\\u7406\\u65B9\\u6CD5\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u5C06\\u4E0D\\u540C\\u7684\\u6A21\\u5757\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u7136\\u540E\\u751F\\u6210\\u4E00\\u4EFD json \\u6216\\u8005\\u4EC0\\u4E48\\u683C\\u5F0F\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\uFF0C\\u5728\\u52A0\\u8F7D\\u4E3B\\u5E94\\u7528\\u4E4B\\u524D\\uFF0C\\u5148\\u6839\\u636E\\u9700\\u8981\\u7684\\u4F9D\\u8D56\\uFF0C\\u53BB\\u52A0\\u8F7D\\u63D0\\u524D\\u6253\\u5305\\u597D\\u7684\\u6A21\\u5757\\uFF0C\\u52A0\\u8F7D\\u5B8C\\u6BD5\\u4E4B\\u540E\\u518D\\u8FD0\\u884C\\u4E3B\\u5E94\\u7528\\u7684\\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u5E72\\u8106\\u90FD\\u5C06\\u5916\\u90E8\\u4F9D\\u8D56\\u505A\\u6210\\u5F02\\u6B65\\u5BFC\\u5165\\uFF0C\\u8FDE\\u4F9D\\u8D56\\u5173\\u7CFB\\u90FD\\u51E0\\u4E4E\\u4E0D\\u7528\\u5206\\u6790\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4E5F\\u6709\\u7684\\u662F\\u53EA\\u751F\\u6210\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u7F16\\u8BD1\\u76EE\\u6807\\uFF0C\\u518D\\u505A tree-shaking \\u548C bundle\\uFF0C\\u80FD\\u6709\\u66F4\\u597D\\u7684\\u9002\\u914D\\u7075\\u6D3B\\u6027\\uFF0C\\u751A\\u81F3\\u53EF\\u4EE5\\u4E0A\\u751F\\u4EA7\\u73AF\\u5883\\u3002\"), mdx(\"p\", null, \"\\u6A21\\u5757\\u7684\\u5F15\\u5165\\u4E5F\\u57FA\\u672C\\u4E0A\\u662F hack/hook \\u8FDB webpack_require\\uFF0C\\u66FF\\u6362\\u6216\\u8005\\u62FC\\u63A5\\u5404\\u4E2A\\u4F9D\\u8D56\\u7684 chunk\\u3002\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u8FD9\\u79CD\\u5B9E\\u73B0\\u65B9\\u6848\\u548C webpack 5 \\u7684 Module Federation \\u611F\\u89C9\\u539F\\u7406\\u662F\\u4E00\\u4E2A\\u610F\\u601D\\uFF0C\\u53EA\\u662F Module Federation \\u7684\\u65B9\\u6848\\u66F4\\u52A0\\u66F4\\u7B26\\u5408\\u5B98\\u65B9\\u7684 runtime\\u3002\"), mdx(\"h3\", null, \"2.2 \\u793E\\u533A\\u5DE5\\u5177\\u7684\\u63A2\\u7D22\"), mdx(\"p\", null, \"\\u76EE\\u524D\\u6709\\u5F88\\u591A\\u7684\\u6253\\u5305\\u5DE5\\u5177\\u63D0\\u51FA\\u4E86\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u7684\\u65B9\\u6848\\uFF0C\\u5305\\u62EC\\u4E92\\u8054\\u7F51\\u5927\\u5382\\u7B49\\u4E5F\\u5728\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u4E0A\\u5F00\\u59CB\\u7422\\u78E8\\u4E86\\uFF0C\\u90FD\\u662F\\u7B97\\u662F\\u9010\\u6E10\\u81A8\\u80C0\\u7684\\u4E1A\\u52A1\\u7F16\\u8BD1\\u65F6\\u95F4\\u7684\\u6781\\u81F4\\u4F18\\u5316\\u5427\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"vite\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://cn.vitejs.dev/guide/dep-pre-bundling.html\"\n }, \"https://cn.vitejs.dev/guide/dep-pre-bundling.html\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mfsu\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://umijs.org/zh-CN/docs/mfsu\"\n }, \"https://umijs.org/zh-CN/docs/mfsu\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"taro\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/NervJS/taro/discussions/11533\"\n }, \"https://github.com/NervJS/taro/discussions/11533\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Lynx\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://zhuanlan.zhihu.com/p/357607473\"\n }, \"\\u57FA\\u4E8E esbuild \\u7684 universal bundler \\u8BBE\\u8BA1 - \\u77E5\\u4E4E (zhihu.com)\"), \" esbuild \\u7684 universal bundler \\u8BBE\\u8BA1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"ICE \\u4F9D\\u8D56\\u6253\\u5305 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.aliyun.com/article/783473\"\n }, \"\\u9762\\u5BF9 ESM \\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0Cwebpack \\u8FD8\\u6709\\u8FD8\\u624B\\u4E4B\\u529B\\u5417\\uFF1F-\\u963F\\u91CC\\u4E91\\u5F00\\u53D1\\u8005\\u793E\\u533A (aliyun.com)\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"http://www.alloyteam.com/2020/04/14338/\"\n }, \"\\u63A2\\u7D22 webpack5 \\u65B0\\u7279\\u6027 Module federation \\u5728\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u5E94\\u7528 | AlloyTeam\"))), mdx(\"p\", null, \"\\u6240\\u4EE5\\u817E\\u8BAF\\u3001\\u963F\\u91CC\\u3001\\u5B57\\u8282\\u3001\\u4EAC\\u4E1C\\u7B49\\u4E92\\u8054\\u7F51\\u5927\\u5382\\u90FD\\u5728\\u8FD9\\u4E2A\\u65B9\\u5411\\u4E0A\\u8FDB\\u884C\\u4E86\\u63A2\\u7D22\\u5E76\\u6709\\u4EA7\\u51FA\\u3002\"), mdx(\"p\", null, \"\\u4F60\\u53EF\\u4EE5\\u5728\\u8FD9\\u4E2A\\u4ED3\\u5E93\\u4E2D\\u770B\\u5230\\u5404\\u4E2A\\u5927\\u5382\\u7684\\u76F8\\u5173\\u5E94\\u7528\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/module-federation/module-federation-examples\"\n }, \"\\u6A21\\u5757-\\u8054\\u5408/\\u6A21\\u5757-\\u8054\\u5408-\\u793A\\u4F8B\\uFF1A\\u6A21\\u5757\\u8054\\u5408\\u7684\\u5B9E\\u73B0\\u793A\\u4F8B\\uFF0C\\u7531\\u6A21\\u5757\\u8054\\u5408\\u7684\\u521B\\u5EFA\\u8005\\u63D0\\u4F9B (github.com)\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5B9E\\u73B0\\u65B9\\u6848\\u7684\\u6E90\\u7801\\uFF1A\")), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"vite\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/vitejs/vite/blob/main/packages/vite/src/node/optimizer/registerMissing.ts\"\n }, \"https://github.com/vitejs/vite/blob/main/packages/vite/src/node/optimizer/registerMissing.ts\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"umi.js\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/umijs/umi-next/blob/master/packages/mfsu/src/mfsu.ts\"\n }, \"umi-next/mfsu.ts at master \\xB7 umijs/umi-next (github.com)\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"taro\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/NervJS/taro/blob/feat%2Fwebpack5/packages/taro-webpack5-runner/src/prebundle/index.ts\"\n }, \"https://github.com/NervJS/taro/blob/feat%2Fwebpack5/packages/taro-webpack5-runner/src/prebundle/index.ts\"))), mdx(\"p\", null, \"\\u867D\\u7136\\u5404\\u81EA\\u7684\\u5B9E\\u73B0\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F webpack \\u8FD9\\u8FB9\\u90FD\\u662F\\u4F7F\\u7528 Module Federation \\u7684\\u52A0\\u8F7D\\u65B9\\u6848\\u505A\\u7684\\uFF0C\\u800C\\u4E14\\u6839\\u636E\\u4ED6\\u4EEC\\u7684\\u7ED3\\u8BBA\\uFF0C\\u8FD9\\u79CD\\u9884\\u6253\\u5305\\u7684\\u65B9\\u6848\\u5BF9\\u4E8E\\u7F16\\u8BD1\\u7684\\u63D0\\u5347\\u662F\\u975E\\u5E38\\u5938\\u5F20\\u7684\\uFF0C\\u751A\\u81F3\\u4E00\\u5206\\u591A\\u949F\\u80FD\\u4F18\\u5316\\u5230 1s\\u4EE5\\u5185\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u770B\\u4ED6\\u4EEC\\u7684\\u6E90\\u7801\\uFF0C\\u867D\\u7136\\u65B9\\u6848\\u72EC\\u7ACB\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u6709\\u975E\\u5E38\\u591A\\u7684\\u6846\\u67B6\\u98CE\\u683C\\u548C\\u975E\\u6838\\u5FC3\\u4EE3\\u7801\\uFF0C\\u5C01\\u88C5\\u7684\\u592A\\u201C\\u9AD8\\u7EA7\\u201D\\uFF0C\\u76F4\\u63A5\\u62FF\\u6765\\u7528\\u6211\\u4E5F\\u662F\\u4E00\\u8138\\u61F5\\uFF0C\\u4E0D\\u5982\\u81EA\\u5DF1\\u634B\\u4E00\\u4E0B\\u6D88\\u5316\\u6D88\\u5316\\uFF0C\\u540E\\u671F\\u7528\\u5230\\u4E1A\\u52A1\\u4E2D\\u3002\\u672C\\u6587\\u5B9E\\u9645\\u7FFB\\u770B\\u5E76\\u53C2\\u8003\\u4E86\\u4ED6\\u4EEC\\u975E\\u5E38\\u591A\\u7684\\u5B9E\\u73B0\\u601D\\u8DEF\\u548C\\u6280\\u5DE7\\uFF0C\\u4E0D\\u8FC7\\u56E0\\u4E3A\\u6700\\u540E\\u6211\\u7684\\u5B9E\\u73B0\\u6BD4\\u8F83\\u4F20\\u7EDF\\uFF0C\\u518D\\u52A0\\u4E0A\\u7BC7\\u5E45\\u6709\\u9650\\u4E5F\\u5C31\\u4E0D\\u4E00\\u4E00\\u5BF9\\u6BD4\\u8D34\\u51FA\\u6765\\u4E86\\u3002\"), mdx(\"h3\", null, \"2.3 \\u5173\\u952E\\u6D41\\u7A0B\"), mdx(\"p\", null, \"\\u4E3B\\u8981\\u601D\\u60F3\\u90FD\\u662F\\u5206\\u6790\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u6839\\u636E\\u4F9D\\u8D56\\u5F15\\u5165\\u6765\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u6700\\u540E\\u901A\\u8FC7\\u52A0\\u8F7D\\u6216\\u8005\\u6A21\\u5757\\u8054\\u90A6\\u6765\\u65E0\\u611F\\u4EE3\\u66FF\\u7528\\u6237\\u7684\\u5F15\\u5165\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6536\\u96C6\\u5BF9 node_modules \\u7684\\u5F15\\u7528\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5206\\u6790\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u4EE5\\u4FBF\\u5904\\u7406\\u4E92\\u76F8\\u4F9D\\u8D56\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u4F9D\\u8D56: \\u5C06\\u4F9D\\u8D56\\u6253\\u5305\\u6210 bundle\\uFF08ESM/Commonjs\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u901A\\u8FC7\\u5404\\u81EA\\u7684\\u6A21\\u5757\\u5F15\\u5165\\u65B9\\u6848\\u88AB import\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5173\\u952E\\u70B9\\u5728\\u4E8E\\u600E\\u4E48\\u6253\\u5305\\uFF0C\\u4EE5\\u53CA\\u6253\\u5305\\u597D\\u7684 bundle \\u600E\\u4E48\\u88AB\\u5F15\\u5165\\uFF0C\\u8FD9\\u4E24\\u70B9\\u7684\\u5B9E\\u73B0\\u5176\\u5B9E\\u65B9\\u6CD5\\u633A\\u5F00\\u653E\\u7684\\u3002\"), mdx(\"h4\", null, \"1. \\u6253\\u5305\\u65B9\\u6CD5\"), mdx(\"p\", null, \"webpack\\u3001esbuild\\u3001Rollup\\u3001SnowPack\\u7B49\\uFF0C\\u53EA\\u8981\\u80FD\\u6253\\u5305\\u51FA esm \\u6216\\u8005 commonjs \\u6807\\u51C6\\u7684\\u5305\\u5C31\\u884C\\uFF0C\\u6211\\u4EEC\\u5982\\u679C\\u4EC5\\u9488\\u5BF9\\u5F00\\u53D1\\u73AF\\u5883\\u7684\\u6D4F\\u89C8\\u5668\\uFF0C\\u90A3\\u4E48\\u53EA\\u8981\\u76F4\\u63A5\\u80FD\\u591F\\u88AB\\u5F15\\u7528\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, \"\\u751A\\u81F3\\u5F88\\u591A\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u90FD\\u5728 dist \\u76EE\\u5F55\\u4E0B\\u63D0\\u4F9B\\u4E86\\u6253\\u5305\\u597D\\u7684 min.js \\u6216\\u8005 umd/esm \\u6807\\u51C6\\u7684\\u6587\\u4EF6\\uFF0C\\u514D\\u6253\\u5305\\u76F4\\u63A5\\u62FF\\u6765\\u7528\\u5373\\u53EF\\uFF0C\\u8FD8\\u6709\\u4E9B\\u7EBF\\u4E0A\\u7684 esm CDN \\u670D\\u52A1 esm.sh / skypack \\u7B49\\u3002\"), mdx(\"p\", null, \"\\u81F3\\u4E8E\\u672C\\u5730\\u73AF\\u5883\\u4E0B\\uFF0C\\u76EE\\u524D\\u793E\\u533A\\u66F4\\u591A\\u4F7F\\u7528 esbuild \\u6765\\u6253\\u5305\\uFF0C\\u6BD5\\u7ADF\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u590D\\u6742\\u5EA6\\u53EF\\u63A7\\uFF0Cesbuild \\u5E94\\u8BE5\\u662F\\u76EE\\u524D\\u6700\\u597D\\u7684\\u9009\\u62E9\\uFF0C\\u7559\\u610F\\u4E00\\u4E0B\\u4E92\\u76F8\\u5F15\\u7528\\u95EE\\u9898\\u5373\\u53EF\\u3002\"), mdx(\"h4\", null, \"2. \\u5305\\u683C\\u5F0F\"), mdx(\"p\", null, \"\\u524D\\u7AEF\\u7684 bundle \\u53EF\\u4EE5\\u8BF4\\u771F\\u7684\\u662F\\u592A\\u96BE\\u4E86\\uFF0Ccjs\\u3001iife\\u3001esm\\uFF0C\\u751A\\u81F3\\u8FD8\\u6709 amd\\u3001umd\\u3001system.js \\u4E4B\\u7C7B\\u3002\\u603B\\u8981\\u786E\\u5B9A\\u4E00\\u4E2A\\u5427\\uFF0C\\u81F3\\u5C11\\u8BA9\\u5F15\\u5165 bundle \\u7684\\u5904\\u7406\\u4E0D\\u7528\\u5404\\u79CD\\u517C\\u5BB9\\u4E86\\u3002\"), mdx(\"p\", null, \"cjs \\u662F node \\u73AF\\u5883\\u4E0B\\u7684\\u5305\\uFF0C\\u867D\\u7136\\u5B9E\\u73B0\\u5BB9\\u6613\\uFF0C\\u517C\\u5BB9\\u4E5F\\u633A\\u597D\\uFF0C\\u4F46\\u662F\\u9700\\u8981 runtime \\u4E14 tree-shaking \\u6216\\u76F8\\u5173\\u7684\\u5206\\u6790\\u4F9D\\u8D56\\u4E0D\\u597D\\u505A\\u3002\\niife \\u5C31\\u662F\\u4F20\\u8BF4\\u4E2D\\u7684\\u95ED\\u5305\\uFF0C\\u8FD9\\u4E2A\\u5C01\\u88C5\\u5927\\u6982\\u7387\\u4F1A\\u51FA\\u73B0\\u91CD\\u590D\\u6267\\u884C\\u7684\\u95EE\\u9898\\u3002\\nesm \\u662F ES \\u89C4\\u8303\\u4E0B\\u7684\\u6807\\u51C6\\u6A21\\u5757\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u5B58\\u5728\\u5F02\\u6B65\\u903B\\u8F91\\uFF0C\\u4E0D\\u592A\\u7B26\\u5408 webpack \\u98CE\\u683C\\uFF0C\\u5BF9\\u5F00\\u53D1\\u4E5F\\u6709\\u5F71\\u54CD\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7 webpack \\u6253\\u5305\\u4E5F\\u90FD\\u662F\\u4E0D\\u7528\\u592A\\u5173\\u5FC3\\uFF0C\\u800C\\u4E14\\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u4E0D\\u592A\\u62C5\\u5FC3\\u7F3A\\u70B9\\uFF0C\\u80FD\\u8DD1\\u5C31\\u884C\\uFF0C\\u4F18\\u5148 esm\\uFF0C\\u5176\\u6B21 cjs\\u3002\"), mdx(\"h4\", null, \"3. \\u5F15\\u5165\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u6253\\u5305\\u548C\\u5305\\u683C\\u5F0F\\u90FD\\u4E0D\\u662F\\u4EC0\\u4E48\\u5927\\u95EE\\u9898\\uFF0C\\u5DF2\\u7ECF\\u6709\\u5F88\\u591A\\u5B9E\\u8DF5\\u4E86\\uFF0C\\u600E\\u4E48\\u7528\\u5462\\uFF1F\\u6BD5\\u7ADF\\u4E1A\\u52A1\\u4EE3\\u7801\\u4E0D\\u518D\\u6253\\u5305\\u5230\\u4E00\\u8D77\\u4E86\\uFF0C\\u6240\\u4EE5 runtime \\u7684\\u52A0\\u8F7D\\u5668\\u5FC5\\u987B\\u8003\\u8651\\u5F02\\u6B65\\u52A0\\u8F7D\\u3001\\u5171\\u4EAB\\u6A21\\u5757\\u7B49\\u4E00\\u5806\\u524D\\u7F6E\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u5F15\\u5165\\u65B9\\u6CD5\\u548C\\u6253\\u5305\\u7684\\u4EA7\\u7269\\u76F8\\u5173\\u6027\\u8F83\\u9AD8\\uFF0C\\u751A\\u81F3\\u5206\\u4E3A node \\u7AEF / browser\\u7AEF\\uFF0C\\u533A\\u5206cjs\\u3001esm\\u3001iife\\u751A\\u81F3 module graph \\u7684\\u4EA7\\u7269\\u3002\"), mdx(\"p\", null, \"\\u6253\\u5305\\u5DE5\\u5177\\u6216\\u8005\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5BF9 esm \\u6216 commonjs \\u7684\\u652F\\u6301\\u90FD\\u633A\\u597D\\u7684\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u66F4\\u5173\\u5FC3\\u901F\\u5EA6\\u800C\\u4E0D\\u662F\\u517C\\u5BB9\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6BD4\\u5982\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"vite \\u4E4B\\u7C7B\\u7684 esm \\u5F00\\u53D1\\u5DE5\\u5177\\u76F4\\u63A5\\u4F7F\\u7528\\uFF0C\\u65E0\\u9700\\u4EC0\\u4E48\\u7279\\u522B\\u7684\\u5F15\\u5165\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u51FA esm/commonjs \\u7136\\u540E inject \\u5230 html \\u4E2D\\uFF0C\\u6253\\u5305\\u65F6\\u8BBE\\u4E3A externals\\u3002\\u7B80\\u5355\\u7C97\\u66B4\\u4F46\\u6709\\u6548\\uFF0C\\u53EA\\u662F\\u8981\\u5904\\u7406\\u4E0D\\u540C\\u7684 entry\\uFF0C\\u540C\\u65F6\\u4E5F\\u6709\\u4F9D\\u8D56\\u548C\\u987A\\u5E8F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u4E4B\\u540E inject \\u5230 entry \\u4E2D\\uFF0C\\u9700\\u8981\\u8003\\u8651\\u987A\\u5E8F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F5C\\u4E3A alias \\u4EE3\\u66FF\\u4E4B\\u524D\\u7684\\u5F15\\u7528\\u3002\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u65B9\\u6CD5\\u4EC0\\u4E48\\u7684\\u90FD\\u53EF\\u4EE5\\u7528\\uFF0C\\u624B\\u6413\\u4E00\\u4E2A\\u81EA\\u7136\\u4E5F\\u5C31\\u662F\\u8D39\\u4E9B\\u8111\\u7EC6\\u80DE\\uFF0C\\u524D\\u63D0\\u4E5F\\u90FD\\u662F\\u9700\\u8981\\u5904\\u7406\\u597D\\u590D\\u6742\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u5F02\\u6B65\\u52A0\\u8F7D\\u903B\\u8F91\\u7B49\\u5FC5\\u8981\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u9700\\u8981\\u4E1A\\u52A1\\u548C\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6A21\\u5757\\u7684 exportMap \\u548C importMap\\uFF0C\\u9012\\u5F52\\u5904\\u7406\\u6240\\u6709\\u9700\\u8981\\u5F15\\u5165\\u7684\\u6587\\u4EF6\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u5305\\u683C\\u5F0F\\u5F15\\u5165\\u8FDB\\u6765\\uFF0C\\u7136\\u540E\\u6309\\u987A\\u5E8F\\u6267\\u884C\\u4E1A\\u52A1\\u903B\\u8F91\\u5C31\\u884C\\u3002\\u5173\\u952E\\u5C31\\u662F\\u8FD9\\u4E2A exportMap \\u548C importMap \\u7684\\u6536\\u96C6\\uFF0C\\u5728\\u5DE5\\u7A0B\\u5316\\u4E2D\\uFF0C\\u5728\\u4E0A\\u9762\\u7684\\u6253\\u5305\\u4E2D\\u6211\\u4EEC\\u4E5F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"es_module_lexer\"), \" \\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\u6536\\u96C6\\u8FD9\\u4E9B\\uFF0C\\u6700\\u540E\\u6211\\u4EEC\\u505A\\u4E00\\u4E2A\\u52A0\\u8F7D\\u5668\\u4E5F\\u5C31\\u884C\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7 webpack5 \\u5DF2\\u7ECF\\u5E2E\\u6211\\u4EEC\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u8DE8\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u5BFC\\u5165\\u65B9\\u6848\\uFF1Awebpack Module Federation\\uFF0C\\u53EF\\u4EE5\\u4F5C\\u4E3A\\u6211\\u4EEC\\u7684\\u4F9D\\u8D56\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5F53\\u7136\\uFF0C\\u4E5F\\u5E76\\u4E0D\\u662F\\u552F\\u4E00\\u7684\\u3002\"), mdx(\"h4\", null, \"4. Module Federation\"), mdx(\"p\", null, \"Module Federation \\u7684\\u6982\\u5FF5\\u548C\\u5B9E\\u73B0\\u90FD\\u5E76\\u4E0D\\u662F\\u5F88\\u65B0\\u7684\\u4E1C\\u897F\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u662F webpack \\u5B98\\u65B9\\u65B9\\u6848\\uFF0C\\u6240\\u4EE5\\u6BD4\\u8F83\\u9002\\u5408 webpack \\u7684 runtime \\u548C\\u7F16\\u8BD1\\u903B\\u8F91\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u4E5F\\u65E0\\u610F\\u505A\\u6E90\\u7801\\u7EA7\\u522B\\u7684\\u5206\\u6790\\uFF0C\\u8FD9\\u91CC\\u53EA\\u63A2\\u7D22\\u600E\\u4E48\\u7528\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u53E5\\u8BDD\\u5C31\\u662F\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u7F16\\u8BD1\\u4EA7\\u7269 bundle \\u53EF\\u4EE5\\u4E92\\u76F8\\u52A0\\u8F7D\\u3001\\u4F9D\\u8D56\\u5171\\u4EAB\\u3001\\u8FDC\\u7AEF\\u514D\\u6784\\u5EFA\\u3001webpack \\u98CE\\u683C\")), mdx(\"p\", null, \"\\u63A8\\u8350\\u770B\\u4E0B\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u65E9\\u671F\\u63A2\\u7D22 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://www.alloyteam.com/2020/04/14338/\"\n }, \"\\u63A2\\u7D22 webpack5 \\u65B0\\u7279\\u6027 Module federation \\u5728\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u5E94\\u7528 | AlloyTeam\"), \"\\uFF0C\\u5F88\\u8BE6\\u5C3D\\u4E14\\u6709\\u53C2\\u8003\\u610F\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u5173\\u952E\\u70B9\\u5728 \\u52A8\\u6001\\u52A0\\u8F7D\\u673A\\u5236\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"webpack \\u901A\\u8FC7 Module Federation \\u63D2\\u4EF6\\u673A\\u5236\\uFF0C\\u5C06 remote \\u66B4\\u9732\\u51FA\\u6765\\u7684\\u6A21\\u5757\\u751F\\u6210\\u4E86\\u4E00\\u4EFD\\u4F9D\\u8D56\\u56FE \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moduleMap\"), \" \\u5230 remoteEntry \\u4E2D\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u5165\\u53E3\\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u6839\\u636E\\u4F9D\\u8D56\\u94FE\\uFF0C\\u52A8\\u6001\\u52A0\\u8F7D\\u5404\\u4E2A\\u4F9D\\u8D56\\u6A21\\u5757\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"remoteEntry \\u88AB\\u5F15\\u5165\\u540E\\u53EF\\u4EE5\\u8BA9\\u52A8\\u6001\\u52A0\\u8F7D\\u5728 remote \\u7684\\u4F9D\\u8D56\\u4E2D\\u53BB\\u627E\\u54CD\\u5E94\\u7684\\u4F9D\\u8D56\\u4F7F\\u7528\\u5F02\\u6B65\\u52A0\\u8F7D\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E5F\\u5C31\\u662F\\u53EA\\u8981\\u4E3B\\u5E94\\u7528\\u80FD\\u591F\\u901A\\u8FC7 runtime \\u5C06 remoteEntry \\u52A0\\u8F7D\\u8FDB\\u6765\\uFF0C\\u76F8\\u5173\\u7684\\u524D\\u7F6E\\u4F9D\\u8D56\\u548C\\u5404\\u4E2A chunk \\u5C31\\u80FD\\u591F\\u81EA\\u7136\\u88AB\\u5F15\\u5165\\uFF0C\\u4E0D\\u4F1A\\u591A\\u4E5F\\u4E0D\\u4F1A\\u5C11\\uFF0C\\u540E\\u9762\\u4E00\\u5207\\u4E5F\\u81EA\\u7136\\u90FD\\u80FD\\u8DD1\\u7684\\u8D77\\u6765\\u4E86\\u3002\")), mdx(\"p\", null, \"\\u8BF4\\u767D\\u4E86\\uFF0C\\u5F00\\u53D1\\u8005\\u5728 webpack \\u914D\\u7F6E\\u4E2D\\u5C06\\u9700\\u8981\\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u914D\\u7F6E\\u5199\\uFF0Cwebpack \\u6839\\u636E\\u914D\\u7F6E\\u5C06\\u5404\\u4E2A\\u5BFC\\u51FA\\u6A21\\u5757\\u4F5C\\u4E3A entry \\u5355\\u72EC\\u5BFC\\u51FA\\uFF0C\\u5E76\\u751F\\u6210\\u4E00\\u4E2A remoteEntry \\u5305\\u542B\\u8FD9\\u4E2A moduleMap\\uFF0C\\u8FD9\\u6837\\u51C6\\u5907\\u597D\\u5B50\\u5E94\\u7528/\\u8FDC\\u7AEF\\u5E94\\u7528\\uFF0C\\u4E0D\\u5FC5\\u548C\\u4E3B\\u5E94\\u7528\\u4E00\\u8D77\\u6253\\u5305\\u4E86\\u3002\\u4E3B\\u5E94\\u7528\\u5728\\u914D\\u7F6E\\u4E86\\u5BFC\\u5165\\u7684\\u65F6\\u5019\\uFF0C\\u6839\\u636E\\u914D\\u7F6E\\u5F15\\u5165\\u8FDC\\u7AEF\\u7684 remoteEntry\\uFF0C\\u6839\\u636E moduleMap \\u6765\\u63D0\\u524D\\u5C06\\u4F9D\\u8D56\\u7684\\u8FDC\\u7AEF chunk \\u52A0\\u8F7D\\u597D\\uFF0C\\u540E\\u7EED\\u7684\\u4E3B\\u5E94\\u7528\\u81EA\\u7136\\u80FD\\u591F\\u65E0\\u611F\\u77E5\\u5F15\\u7528\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u4E5F\\u5728\\u6587\\u6863\\u4E2D\\u63D0\\u5230\\u4E86\\u5BF9\\u4E8E\\u7EC4\\u4EF6\\u5E93\\u7684\\u7528\\u4F8B\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u662F\\u5F3A\\u8C03\\u53EF\\u4EE5\\u7EC4\\u4EF6\\u5E93\\u7684\\u4FEE\\u6539\\u5355\\u72EC\\u7F16\\u8BD1\\uFF0C\\u4E0D\\u9700\\u8981\\u91CD\\u65B0\\u6784\\u5EFA\\u4E3B\\u5E94\\u7528\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u63D0\\u524D\\u6784\\u5EFA\\u7684\\u76EE\\u7684\\u548C Module Federation \\u90FD\\u662F\\u907F\\u514D\\u975E\\u5FC5\\u8981\\u7A0B\\u5E8F\\u7684\\u6784\\u5EFA\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u5C06\\u76F8\\u5BF9\\u72EC\\u7ACB\\u7684\\u6A21\\u5757\\u3001\\u4E1A\\u52A1\\u3001\\u7EC4\\u4EF6\\u5E93\\u3001\\u5355\\u9875\\u7B49\\u5B98\\u65B9\\u573A\\u666F\\u6362\\u6210\\u4E86\\u5177\\u4F53\\u7684\\u67D0\\u4E00\\u4E2Anpm\\u4F9D\\u8D56\\u3002\"), mdx(\"h3\", null, \"2.4 webpack \\u4E0B\\u7684\\u5B9E\\u73B0\\u6B65\\u9AA4\"), mdx(\"p\", null, \"\\u6709\\u5F88\\u591A\\u79CD\\u5B9E\\u73B0\\u9014\\u5F84\\u548C\\u65B9\\u6CD5\\uFF0C\\u6211\\u8FD9\\u91CC\\u53C2\\u8003\\u4E86 umijs/mfsu \\u548C taro-prebundle \\u7684\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u843D\\u5730\\u4EE3\\u7801\\u4E0D\\u540C\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u627E\\u5230 entry\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u626B\\u63CF\\u51FA\\u6240\\u6709\\u7684 node_modules \\u4F9D\\u8D56: scanImports\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u5305\\u5F62\\u5F0F\\uFF0C\\u51C6\\u5907\\u5BF9\\u5E94\\u5171\\u4EAB\\u5165\\u53E3\\u6587\\u4EF6\\uFF0C\\u51C6\\u5907\\u597D remoteApp\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u65B0\\u8BBE\\u4E00\\u4E2A\\u4F9D\\u8D56\\u5305\\u7684 webpack \\u914D\\u7F6E\\uFF0C\\u8003\\u8651\\u4F9D\\u8D56\\u3001\\u5F15\\u7528\\u548C\\u914D\\u7F6E\\u76F8\\u5173\\u903B\\u8F91\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06 remoteApp \\u6253\\u5305\\u6210 Module Federation \\u683C\\u5F0F\\uFF0C\\u5F97\\u5230\\u9884\\u7F16\\u8BD1\\u683C\\u5F0F\\u7684 chunk \\u6587\\u4EF6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u4FEE\\u6539\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u5F15\\u7528\\u65B9\\u6CD5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528webpack \\u914D\\u7F6E\\u8C03\\u6574\\u6DFB\\u52A0 Module Federation \\u76F8\\u5173\\uFF0C\\u8BBE\\u7F6E remotes \\u5F15\\u5165\\u65B9\\u5F0F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u5165\\u53E3\\u6587\\u4EF6\\u8986\\u76D6\\u6539\\u52A8\")), mdx(\"p\", null, \"\\u5BF9 node_modules \\u4F9D\\u8D56\\u7684\\u6253\\u5305\\u4E0D\\u4E00\\u5B9A\\u8981\\u7528 esbuild\\uFF0C\\u4EFB\\u610F\\u7684\\u6253\\u5305\\u5DE5\\u5177\\u90FD\\u53EF\\u4EE5\\uFF0Cumi\\u7528\\u7684\\u662F babel\\uFF0Ctaro \\u53C2\\u8003 vite \\u7528\\u7684\\u90FD\\u662F esbuild\\u3002esbuild \\u901F\\u5EA6\\u5FEB\\uFF0C\\u4F46 babel \\u7684 runtime \\u6BD4\\u8F83\\u5F00\\u653E\\uFF0C\\u66F4\\u65B9\\u4FBF\\u4ECB\\u5165\\u7F16\\u8BD1\\u8FC7\\u7A0B\\u3002\"), mdx(\"p\", null, \"umi\\u3001taro \\u8FD8\\u6709 vite \\u7684\\u5B9E\\u73B0\\uFF0C\\u867D\\u7136\\u90FD\\u8BF4\\u53EF\\u4EE5\\u5355\\u72EC\\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u6E90\\u7801\\u91CC\\u9762\\u4E0E\\u6846\\u67B6\\u7684\\u8026\\u5408\\u8FD8\\u662F\\u6BD4\\u8F83\\u5927\\uFF0C\\u540C\\u65F6\\u56E0\\u4E3A\\u8003\\u8651\\u592A\\u591A\\u5F02\\u5E38\\u548C\\u8FB9\\u754C\\uFF0C\\u6CA1\\u6709\\u90A3\\u4E48\\u4E00\\u76EE\\u4E86\\u7136\\u3002\\u6240\\u4EE5\\u4E0B\\u9762\\u7B80\\u5355\\u8BF4\\u4E0B\\u6211\\u600E\\u4E48\\u505A\\u7684\\u3002\\u65B9\\u6848\\u76F8\\u6BD4\\u4ED6\\u4EEC\\u66F4\\u7B80\\u5355\\u7C97\\u66B4\\uFF0C\\u4E0D\\u8FC7\\u8FD8\\u662F\\u80FD\\u7528\\u7684\\u3002\"), mdx(\"p\", null, \"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u5927\\u591A\\u53EA\\u80FD\\u63D0\\u4F9B\\u601D\\u8DEF\\uFF0C\\u800C\\u4E14\\u6BCF\\u4E2A\\u4EBA\\u7684\\u914D\\u7F6E\\u9879\\u4E0D\\u540C\\uFF0C\\u9700\\u6C42\\u4E0D\\u540C\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u8BF7\\u81EA\\u5DF1\\u8C03\\u8BD5\\uFF1A\"), mdx(\"h4\", null, \"1. entry \\u7684\\u6536\\u96C6\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u5F88\\u7B80\\u5355\\uFF0C\\u6BD5\\u7ADF webpack \\u7684\\u6253\\u5305\\u4E5F\\u662F\\u9700\\u8981\\u7684\\uFF0C\\u9879\\u76EE\\u4E2D\\u662F\\u591A\\u9875\\u9762\\u7684\\u5E94\\u7528\\uFF0C\\u6240\\u4EE5\\u6709\\u5355\\u72EC\\u7684\\u5165\\u53E3\\u6536\\u96C6\\u65B9\\u6CD5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u51B3\\u5B9A\\u4E86\\u7F16\\u8BD1\\u548C\\u6536\\u96C6\\u5668\\u4ECE\\u54EA\\u5F00\\u59CB\\nconst entries = paths.appIndexJs.map((p) => p.path);\\nconst appPath = paths.appPath;\\n\")), mdx(\"h4\", null, \"2. \\u626B\\u63CF\\u4F9D\\u8D56\"), mdx(\"p\", null, \"esbuild \\u5B9E\\u73B0\\u8FD9\\u4E2A\\u4F1A\\u975E\\u5E38\\u5FEB\\uFF0ConResolve \\u7684\\u5404\\u79CD\\u5904\\u7406\\u5F88\\u65B9\\u4FBF\\uFF0C\\u5FEB\\u901F\\u8DD1\\u4E00\\u904D\\u5C31\\u884C\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6536\\u96C6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u540D\\u79F0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6839\\u636E\\u540D\\u79F0\\u83B7\\u5F97\\u4E00\\u4E2A\\u89C4\\u8303\\u540D\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u6587\\u4EF6\\u751F\\u6210\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"resolve \\u51FA\\u76EE\\u6807\\u5165\\u53E3\\u6587\\u4EF6\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u5206\\u6790\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u83B7\\u53D6\\u5305\\u683C\\u5F0F\")), mdx(\"p\", null, \"\\u4E3B\\u8981\\u7684\\u6587\\u4EF6\\u5206\\u4E09\\u7C7B\\uFF1A\\u8DF3\\u8FC7\\u7EAF\\u8D44\\u6E90\\u7C7B\\uFF0C\\u6536\\u96C6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\uFF0C\\u9012\\u5F52\\u975E\\u7B2C\\u4E09\\u65B9\\u7684\\u9879\\u76EE\\u6587\\u4EF6\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"await Promise.all(entries.map(entry => esbuild.build({\\n absWorkingDir: appPath,\\n entryPoints: [entry],\\n bundle: true,\\n write: false, // \\u53EA\\u662F\\u5206\\u6790\\u5F15\\u7528\\u5173\\u7CFB\\uFF0C\\u4E0D\\u9700\\u8981\\u771F\\u7684\\u5199\\u5165\\u78C1\\u76D8\\n format: 'esm',\\n plugins: [ scanImportsPlugin ]\\n})));\\n\\nconst scanImportsPlugin = {\\n name: 'scanImports',\\n setup(build) {\\n // \\u786E\\u8BA4\\u4E0D\\u9700\\u8981\\u5904\\u7406\\u7684\\u5F15\\u7528\\uFF0C\\u76F4\\u63A5\\u6807\\u8BB0\\u5916\\u90E8\\u6A21\\u5757\\u8DF3\\u8FC7\\n\\xA0 \\xA0 \\xA0 build.onResolve(({ filter: new RegExp(`\\\\\\\\.(${[/*[\\u975Ejsx?tsx?\\u4E4B\\u7C7B]\\u7B49\\u7B49*/].join('|')})$`) }), utils.externalModule); \\n\\n\\xA0 \\xA0 \\xA0 // \\u7EAF\\u7CB9\\u7684\\u7B2C\\u4E09\\u65B9\\u5F15\\u7528\\uFF0C\\u4EE5\\u5B57\\u6BCD\\u6216\\u8005@\\u5F00\\u5934\\uFF0C\\u4E0D\\u5305\\u542B https://\\u7C7B\\uFF0C\\u4E0D\\u5E26\\u6587\\u4EF6\\u524D\\u7F00\\uFF0C\\u4E0D\\u5E26[http,ftp,E:]://\\u7C7B\\u7684\\u8D44\\u6E90\\u8D44\\u6E90\\n build.onResolve({ filter: /^[\\\\w@][^:]/ }, async ({ path: id, importer }) => {\\n // \\u5DF2\\u7ECF\\u6536\\u96C6\\u7684\\u4F9D\\u8D56\\u76F4\\u63A5\\u8DF3\\u8FC7\\n if (deps.has(id)) return { path: id, external: true };\\n\\n const resolvedPath = await resolve(path.dirname(importer), id);\\n if (resolvedPath.includes('node_modules')) {\\n // \\u8FD9\\u662F\\u6211\\u4EEC\\u6700\\u4E3B\\u8981\\u5173\\u5FC3\\u7684\\u5730\\u65B9: \\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\n if (/\\\\.[jt]sx?$/.test(resolvedPath)) {\\n\\n // \\u7528 es-module-lexer\\uFF08\\u5FEB\\u901F\\u8BCD\\u6CD5\\u5206\\u6790\\u5E93\\uFF09 \\u68C0\\u67E5 ES \\u7684 exports \\u8BED\\u6CD5\\n // \\u4F46\\u662F \\\"export * from\\\" \\u8BED\\u6CD5\\u8FD8\\u662F\\u9700\\u8981\\u5355\\u72EC\\u68C0\\u67E5\\uFF0C\\u540E\\u7EED\\u6709\\u7528\\n let fileContent = await fs.promises.readFile(resolvedPath, 'utf8')\\n // \\u83B7\\u53D6 es \\u5BFC\\u51FA\\u4FE1\\u606F\\uFF0C\\u540E\\u7EED\\u7528\\u6765\\u5224\\u5B9A\\u662F\\u4E0D\\u662F ems\\uFF0C\\u4EE5\\u53CA\\u6253\\u5305\\u7684\\u63D0\\u53D6\\u65B9\\u6CD5\\n const exportsData = es_module_lexer.parse(fileContent);\\n let hasReExports = false;\\n\\n for (const { ss, se } of exportsData[0]) {\\n const exp = fileContent.slice(ss, se);\\n if (/export\\\\s+\\\\*\\\\s+from/.test(exp)) {\\n hasReExports = true;\\n }\\n }\\n\\n const hash = utils.getPkgHash(id, resolvedPath);\\n // flatten id: \\u5C06id\\u4E2D\\u7684\\u659C\\u6760\\u66FF\\u6362\\u6210\\u4E0B\\u5212\\u7EBF\\n // \\u540C\\u65F6\\u4E5F\\u52A0\\u5165\\u7F13\\u5B58 hash\\n const flat = utils.flattenId(id);\\n const flatId = flat + '_' + hash;\\n\\n const moduleMeta = {\\n imports: exportsData.imports || [],\\n exports: exportsData.exports || [],\\n facade: exportsData.facade || false,\\n hasReExports: hasReExports,\\n }\\n\\n let js = '';\\n\\n const importsList = moduleMeta.imports;\\n const exportsList = moduleMeta.exports;\\n\\n // \\u6839\\u636E exportsData \\u5224\\u65AD\\u662F ES \\u8FD8\\u662F CommonJS \\u7684\\u6A21\\u5757\\n\\n if (!importsList.length && !exportsList.length) {\\n /** CommonJS */\\n // console.log('rawId cjs -: ', rawId)\\n moduleMeta.needInterop = true;\\n js = `module.exports = require(\\\"${id}\\\")`;\\n } else {\\n /** ESM */\\n if (exportsList.includes('default')) {\\n // export default\\n js += `import d from \\\"${id}\\\";export default d;`;\\n }\\n if (hasReExports ||\\n exportsList.length > 1 ||\\n exportsList[0] !== 'default') {\\n // console.log('rawId esm *: ', rawId)\\n // export * from 'xx'\\n // export const xx\\n js += `export * from \\\"${id}\\\";`;\\n } else {\\n // console.log('rawId esm $: ', rawId)\\n }\\n }\\n\\n deps.set(id, {\\n id,\\n flatId,\\n exposeCode: js,\\n });\\n\\n }\\n // \\u6536\\u96C6\\u8FC7\\u540E\\u76F4\\u63A5\\u8DF3\\u8FC7\\uFF0C\\u4E0D\\u8003\\u8651\\u4F9D\\u8D56\\u7684\\u4F9D\\u8D56\\n return { path: id, external: true };\\n } else if (constant.assetsRE.test(resolvedPath)) {\\n return { path: id, external: true };\\n } else return { path: resolvedPath };\\n });\\n // catch all \\u515C\\u5E95\\u7684\\u5F15\\u5165\\n build.onResolve({ filter: /.*/ }, async ({ path: id, importer }) => {\\n const resolvedPath = await resolve(path.dirname(importer), id);\\n return { path: resolvedPath };\\n });\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u6700\\u7EC8\\u4EA7\\u7269\\u5F97\\u5230\\u4E00\\u4E2A\\u4F9D\\u8D56\\u5217\\u8868\\uFF0C\\u5305\\u542B\\u7740\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u540D\\u79F0\\u3001\\u6587\\u4EF6hash\\u3001\\u91CD\\u65B0\\u5BFC\\u51FA\\u7684\\u5F15\\u7528\\u6587\\u4EF6\\uFF0C\\u4EE5\\u4FBF\\u540E\\u7EED\\u903B\\u8F91\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"deps = [\\n {\\n id: 'dayjs',\\n flatId: 'dayjs_a1fc7db8',\\n exposeCode: 'module.exports = require(\\\"dayjs\\\")',\\n },\\n // ...\\n]\\n\")), mdx(\"h4\", null, \"3. \\u751F\\u6210\\u5171\\u4EAB\\u5165\\u53E3\"), mdx(\"p\", null, \"webpack Module Federation \\u7684 webpack \\u914D\\u7F6E\\u4E2D\\u9700\\u8981\\u4E00\\u4E2A expose \\u7684\\u5B57\\u6BB5\\uFF0C\\u91CC\\u9762\\u9700\\u8981\\u5305\\u542B\\u4F60\\u60F3\\u628A\\u54EA\\u4E9B\\u7EC4\\u4EF6\\u66B4\\u9732\\u51FA\\u53BB\\uFF0C\\u8FD9\\u4E2A\\u6587\\u4EF6\\u6211\\u4EEC\\u9700\\u8981\\u751F\\u6210\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"flattenDeps.forEach(dep => {\\n const exposePath = path.join(bundlesDir, dep.flatId + '.expose.js')\\n if(!fs.existsSync(exposePath)) {\\n fs.writeFileSync(exposePath, dep.exposeCode)\\n }\\n})\\n\")), mdx(\"p\", null, \"\\u660E\\u767D Module Federation \\u65B9\\u6848\\u67B6\\u6784\\u7684\\u5E94\\u8BE5\\u610F\\u8BC6\\u5230\\u4E86\\uFF0C\\u8FD9\\u6837\\u6211\\u4EEC\\u76F8\\u5F53\\u4E8E\\u51C6\\u5907\\u4E86\\u4E00\\u4E2A\\u65B0\\u7684 webpack \\u9879\\u76EE\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u4E00\\u5806\\u6A21\\u5757\\uFF0C\\u6BCF\\u4E2A\\u6A21\\u5757\\u5B9E\\u9645\\u4E0A\\u90FD\\u662F\\u76F4\\u63A5\\u5F15\\u7528\\u5E76\\u6839\\u636E esm \\u6216 commonJS \\u89C4\\u8303\\u5BFC\\u51FA\\u7684\\u7B2C\\u4E09\\u65B9\\u6A21\\u5757\\u3002\\u4E3A\\u6211\\u4EEC\\u4E0B\\u4E00\\u6B65\\u7684\\u5DE5\\u4F5C\\u505A\\u597D\\u4E86\\u51C6\\u5907\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u82B1\\u4E86\\u975E\\u5E38\\u591A\\u5FC3\\u601D\\u8BBE\\u8BA1\\u4E86\\u4E00\\u4E2A esbuild \\u5148 bundle \\u5316\\u4E4B\\u540E\\u518D expose \\u51FA\\u53BB\\u7684\\u65B9\\u6848\\uFF0C\\u4F1A\\u51FA\\u73B0\\u5171\\u4EAB\\u4F9D\\u8D56\\u91CD\\u590D\\u6253\\u5305\\uFF0C\\u8FD8\\u6709\\u591A\\u5B9E\\u4F8B\\u7684\\u95EE\\u9898\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u8FD9\\u91CC\\u7B80\\u5355\\u5904\\u7406\\u66F4\\u6709\\u6548\\uFF0C\\u8BA9 webpack \\u540E\\u8FB9\\u5E2E\\u6211\\u4EEC\\u5904\\u7406\\u5171\\u4EAB\\u4F9D\\u8D56\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7EC8\\u4EA7\\u7269\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"./react_60f57521.expose.js\\n./react-dom_ee488318.expose.js\\n./dayjs_a1fc7db8.expose.js\\n\")), mdx(\"h4\", null, \"4. Remote App \\u5B9E\\u9645\\u6253\\u5305\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u6B65\\u6211\\u4EEC\\u51C6\\u5907\\u597D\\u4E86\\u8FD9\\u4E2A\\u7A7A\\u58F3\\u7684 remoteApp\\uFF0C\\u8FD9\\u91CC\\u6211\\u4EEC\\u5F00\\u59CB\\u6253\\u5305\\u51FA\\u7B26\\u5408 Module Federation \\u7684\\u903B\\u8F91\\u4EA7\\u7269\\uFF0C\\u4E5F\\u5C31\\u662F remote-chunk \\u6587\\u4EF6\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 webpack \\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u53EA\\u5305\\u542B\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u8F93\\u5165\\u4E0D\\u91CD\\u8981\\uFF0C\\u7A7A\\u6587\\u4EF6\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06\\u6240\\u6709\\u4E0A\\u9762\\u751F\\u6210\\u7684\\u5171\\u4EAB\\u4F9D\\u8D56\\u7684\\u5165\\u53E3\\u4F5C\\u4E3A\\u914D\\u7F6E exposes \\u53C2\\u6570\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u901A\\u8FC7\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 loader \\u5C06\\u6253\\u5305\\u8FC7\\u7A0B\\u4E2D\\u7684\\u5171\\u4EAB\\u4F9D\\u8D56\\u7ED9\\u5904\\u7406\\u4E0B\\uFF0C\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E0A\\u907F\\u514D\\u91CD\\u590D\\u6253\\u5305\\u95EE\\u9898\\uFF08\\u8FD9\\u4E00\\u6B65\\u53EF\\u80FD\\u6CA1\\u6709\\u5FC5\\u8981\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u91CC\\u8FD8\\u662F\\u52A0\\u4E0A\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53EF\\u4EE5\\u7528 esbuild-loader\\uFF0C\\u6216\\u8005 swc \\u52A0\\u901F\\u7F16\\u8BD1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7136\\u540E webpack \\u7F16\\u8BD1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728 output \\u6587\\u4EF6\\u5939\\u5C31\\u80FD\\u5F97\\u5230\\u6211\\u4EEC\\u7684 remote \\u7684\\u4E1C\\u897F\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const webpackConfig = {\\n\\xA0 \\xA0 entry: path.join(__dirname, './webpack/index.js'),\\n\\xA0 \\xA0 output: {\\n\\xA0 \\xA0 \\xA0 path: remoteEntryPath, // \\u8BBE\\u4E3A public \\u76EE\\u5F55\\n\\xA0 \\xA0 \\xA0 filename: \\\"index.bundle.js\\\",\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 // mode: \\\"development\\\",\\n\\xA0 \\xA0 // devtool: 'source-map',\\n\\xA0 \\xA0 cache: {\\n\\xA0 \\xA0 \\xA0 type: 'filesystem',\\n\\xA0 \\xA0 \\xA0 cacheDirectory: webpackEntryPath,\\n\\xA0 \\xA0 \\xA0 buildDependencies: {\\n\\xA0 \\xA0 \\xA0 \\xA0 config: Object.values(exposes)\\n\\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 }, \\n\\xA0 \\xA0 module: {\\n\\xA0 \\xA0 \\xA0 rules: [\\n\\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 test: /\\\\.(js|mjs|jsx|ts|tsx)$/,\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 use: [\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: require.resolve('esbuild-loader'),\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 options: {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: 'tsx',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 target: 'esnext',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: require.resolve('./import-to-remote-loader.js'),\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 options: {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 type: 'remote',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 ],\\n\\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 ]\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 plugins: [\\n\\xA0 \\xA0 \\xA0 new ModuleFederationPlugin({\\n\\xA0 \\xA0 \\xA0 \\xA0 name: \\\"prebundle_remote\\\",\\n\\xA0 \\xA0 \\xA0 \\xA0 filename: \\\"remoteEntry.js\\\",\\n\\xA0 \\xA0 \\xA0 \\xA0exposes: exposes, // './dayjs': 'E:\\\\\\\\u-codes\\\\\\\\hola\\\\\\\\static-sites\\\\\\\\node_modules\\\\\\\\.pnpm\\\\\\\\dayjs@1.11.8\\\\\\\\node_modules\\\\\\\\dayjs\\\\\\\\dayjs.min.js'\\n\\xA0 \\xA0 \\xA0 \\xA0// \\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u76EE\\u524D\\u4E0D\\u8003\\u8651\\u5171\\u4EAB\\u4F9D\\u8D56\\uFF0C\\u53EA\\u7528\\u4E86 cjs \\u548C esm\\uFF0C\\u5E94\\u8BE5\\u4E0D\\u4F1A\\u51FA\\u73B0\\u91CD\\u590D\\u6267\\u884C\\u7684\\u6A21\\u5757\\n\\xA0 \\xA0 \\xA0 \\xA0// shared: ['react', 'react-dom']\\n\\xA0 \\xA0 \\xA0 }),\\n\\xA0 \\xA0 ]\\n\\xA0 }\\nawait new Promise((resolve, reject) => {\\n\\xA0 \\xA0 webpack(remoteWebpackConf, (err, stats) => {\\n\\xA0 \\xA0 \\xA0 if (err || stats.hasErrors()) {\\n\\xA0 \\xA0 \\xA0 \\xA0 reject(err || stats.toJson().errors)\\n\\xA0 \\xA0 \\xA0 } resolve()\\n\\xA0 \\xA0 })\\n\\xA0 })\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u8010\\u5FC3\\u7B49\\u5F85\\u4E0B\\uFF0C\\u7F16\\u8BD1\\u5DE5\\u4F5C\\u6839\\u636E\\u4F60\\u9879\\u76EE\\u4E09\\u65B9\\u4F9D\\u8D56\\u591A\\u5C11\\u6709\\u4E0D\\u540C\\u7684\\u65F6\\u95F4\\uFF0C\\u597D\\u5728\\u8FD9\\u4E9B\\u7F16\\u8BD1\\u5DE5\\u4F5C\\u4EE5\\u540E\\u53EF\\u80FD\\u5C31\\u7701\\u4E0B\\u4E86\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u4F60\\u9700\\u8981\\u6839\\u636E\\u81EA\\u5DF1\\u9879\\u76EE\\u4F9D\\u8D56\\u53D8\\u52A8\\uFF0C\\u7F13\\u5B58\\u6216\\u8005\\u8DF3\\u8FC7\\u7F16\\u8BD1\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// output \\u6587\\u4EF6\\u5939\\u5C06\\u4F1A\\u51FA\\u73B0\\u6211\\u4EEC\\u6240\\u9700\\u7684\\u6587\\u4EF6\\uFF0C\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u914D\\u7F6E\\u53EF\\u80FD\\u76EE\\u5F55\\u4E0D\\u540C\\n./remoteEntry.js\\n./157.index.bundle.js\\n// mode: \\\"development\\\" \\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E0D\\u4F1A\\u88AB\\u538B\\u7F29\\u5904\\u7406\\uFF0C\\u6587\\u4EF6\\u540D\\u4E5F\\u6709\\u53EF\\u8BFB\\u6027\\n./_prebundle_bundles_dayjs_a1fc7db8_js.index.bundle.js\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u5C06\\u8FD9\\u4E9B\\u6587\\u4EF6\\uFF0C\\u653E\\u5230\\u6211\\u4EEC\\u9879\\u76EE\\u7684 public \\u6587\\u4EF6\\u5939\\u4E2D\\uFF0C\\u6216\\u8005\\u4FEE\\u6539\\u4E00\\u4E0B webpack-dev-server \\u8BA9\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u9875\\u9762\\u76F4\\u63A5\\u8BF7\\u6C42\\u5230\\u8FD9\\u5806\\u6587\\u4EF6\\u5C31\\u884C\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u4EA7\\u51FA\\u7684\\u4E1C\\u897F\\u76EE\\u7684\\u5728\\uFF1A\\u5728\\u8FD9\\u4E2A\\u76EE\\u5F55\\u91CC\\u9762\\u662F\\u6211\\u4EEC\\u5DF2\\u7ECF\\u7528 webpack \\u7F16\\u8BD1\\u597D\\u7684\\u9879\\u76EE\\uFF0C\\u8FD9\\u4E2A\\u9879\\u76EE\\u914D\\u7F6E\\u4E86 remote \\u5171\\u4EAB\\u4F9D\\u8D56\\uFF0C\\u66B4\\u9732\\u51FA\\u6765\\u7684\\u5171\\u4EAB\\u6A21\\u5757\\u662F\\u6211\\u4EEC\\u6240\\u4EE5\\u9700\\u8981\\u7684\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684\\u8FDC\\u7AEF\\u6A21\\u5757\\u5DF2\\u7ECF\\u51C6\\u5907\\u597D\\u4E86\\uFF0C\\u4E3B\\u5E94\\u7528\\u4E5F\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u3002\"), mdx(\"h4\", null, \"5. \\u4E3B\\u5E94\\u7528\\u5904\\u7406\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4FEE\\u6539\\u4F9D\\u8D56\\u5F15\\u7528\\u8DEF\\u5F84\")), mdx(\"p\", null, \"\\u4E3B\\u5E94\\u7528\\u4F7F\\u7528\\u5B50\\u5E94\\u7528\\u91CC\\u9762\\u7684\\u6A21\\u5757\\uFF0C\\u4E0D\\u518D\\u80FD\\u76F4\\u63A5\\u5F15\\u7528\\u4E86\\uFF0C\\u9700\\u8981\\u589E\\u52A0 remote \\u524D\\u7F00\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u76F4\\u63A5\\u5F15\\u7528\\u7B2C\\u4E09\\u65B9\\u6A21\\u5757\\nimport dayjs from 'dayjs'\\n// \\u7528\\u8054\\u90A6\\u6A21\\u5757\\u7684\\u65B9\\u6CD5\\u5F15\\u5165\\u6211\\u4EEC\\u4E4B\\u524D\\u6253\\u5305\\u597D\\u7684\\uFF0Cprebundle \\u662F\\u6211\\u4EEC\\u7684 remote \\u540D\\u79F0\\nimport dayjs from 'prebundle/dayjs'\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u6211\\u4EEC\\u8FD8\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u6211\\u4EEC\\u4EE3\\u7801\\u91CC\\u9762\\u7684\\u8BED\\u6CD5\\uFF0C\\u4E0D\\u7136 webpack \\u7684 compiler \\u548C runtime \\u662F\\u6CA1\\u529E\\u6CD5\\u77E5\\u9053\\u6211\\u4EEC\\u9884\\u6253\\u5305\\u597D\\u7684\\u6A21\\u5757\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5B58\\u5728\\u4E24\\u79CD\\u65B9\\u6CD5\\uFF0C\\u4E00\\u79CD\\u662F\\u9759\\u6001\\u5206\\u6790\\u6A21\\u5F0F\\uFF0C\\u7EAF\\u6587\\u672C\\u5F62\\u5F0F\\u627E\\u51FA\\u9879\\u76EE\\u6E90\\u7801\\u4E2D\\u7684 import\\uFF0C\\u7136\\u540E\\u66FF\\u6362\\u3002\\u53E6\\u4E00\\u79CD\\u662F\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u5BF9\\u6A21\\u5757\\u7684\\u53C2\\u6570\\u8FDB\\u884C\\u4FEE\\u6539\\u3002webpack \\u6216\\u8005 babel \\u90FD\\u6709\\u4E30\\u5BCC\\u7684\\u63D2\\u4EF6\\u6216\\u673A\\u5236\\u53EF\\u4EE5\\u505A\\u3002umi \\u901A\\u8FC7 babel plugin \\u63D0\\u4F9B\\u4E86\\u4E24\\u79CD\\u6A21\\u5F0F\\uFF0Ctaro \\u5E94\\u8BE5\\u662F\\u5728 webpack \\u63D2\\u4EF6\\u4E2D\\u9B54\\u6539\\u505A\\u4E86\\u7F16\\u8BD1\\u9636\\u6BB5\\u7684\\u90E8\\u5206\\u3002\"), mdx(\"p\", null, \"\\u6211\\u8FD9\\u8FB9\\u7528\\u7684\\u662F esbuild-loader\\uFF0Cesbuild-loader \\u7528\\u7684 transform \\u65B9\\u6CD5\\u5E76\\u4E0D\\u652F\\u6301\\u63D2\\u4EF6\\uFF0C\\u4E0D\\u8FC7\\u6211\\u4EEC\\u53EF\\u4EE5\\u914D\\u7F6E\\u591A\\u5C42 loader\\uFF0C\\u5728\\u628A\\u6587\\u4EF6\\u4F20\\u7ED9 webpack \\u4E4B\\u524D\\u628A\\u6587\\u4EF6\\u5185\\u5BB9\\u7ED9\\u66FF\\u6362\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// webpack.config.js\\n{\\n\\xA0 test: /\\\\.(js|mjs|jsx|ts|tsx)$/,\\n\\xA0 include: paths.appSrc,\\n\\xA0 use: [\\n\\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 loader: require.resolve('esbuild-loader'),\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 loader: require.resolve('./help/prebundle/import-to-remote-loader.js'),\\n\\xA0 \\xA0 }\\n\\xA0 ]\\n},\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u901A\\u8FC7\\u6700\\u7B80\\u5355\\u7684\\u6B63\\u5219\\u66FF\\u6362\\u6765\\u505A\\uFF0C\\u6EE1\\u8DB3\\u4F7F\\u7528\\u4E86\\u76EE\\u524D\\u662F\\nasync function PrebundleModuleRenameLoader(source) {\\n\\xA0 var flattenDeps = readFlattenDeps()\\n\\xA0 if (!flattenDeps) return source\\n\\n\\xA0 const regexes = [\\n\\xA0 \\xA0 new RegExp(`(require\\\\\\\\(['|\\\"])(.*)(.*?['|\\\"]\\\\\\\\))`, 'g'),\\n\\xA0 \\xA0 new RegExp(`(from\\\\\\\\s+['|\\\"])(.*)(.*?['|\\\"])`, 'g')\\n\\xA0 ];\\n\\n\\xA0 regexes.forEach(reg => {\\n\\xA0 \\xA0 let match;\\n\\xA0 \\xA0 while (match = reg.exec(source)) {\\n\\xA0 \\xA0 \\xA0 const before = match[1];\\n\\xA0 \\xA0 \\xA0 const hit = match[2];\\n\\xA0 \\xA0 \\xA0 const after = match[3];\\n\\xA0 \\xA0 \\xA0 if (flattenDeps.indexOf(hit) > -1) {\\n\\xA0 \\xA0 \\xA0 \\xA0 const wrappedTo = `${before}prebundle/${hit}${after}`;\\n\\xA0 \\xA0 \\xA0 \\xA0 source = source.replace(match[0], wrappedTo);\\n\\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 }\\n\\xA0 });\\n\\xA0 return source\\n}\\nexports['default'] = PrebundleModuleRenameLoader;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u914D\\u7F6E\\u63D2\\u4EF6\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6CA1\\u5565\\u95EE\\u9898\\uFF0C\\u628A\\u5B98\\u65B9\\u6587\\u6863\\u548C\\u793A\\u4F8B\\u770B\\u4E00\\u4E0B\\u4E5F\\u57FA\\u672C\\u4E0A\\u80FD\\u914D\\u51FA\\u6765\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"\\xA0 webpackConf.plugins.push(new ModuleFederationPlugin({\\n\\xA0 \\xA0 name: 'ubug_app',\\n\\xA0 \\xA0 //\\u8FDC\\u7A0B\\u8BBF\\u95EE\\u5730\\u5740\\u5165\\u53E3\\n\\xA0 \\xA0 remotes: {\\n\\xA0 \\xA0 \\xA0 [prebundleNameID]: prebundleNameID + \\\"@\\\" + url + \\\"/prebundle/remoteEntry.js\\\",\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 shared: [{ react: { singleton: true }, 'react-dom': { singleton: true } }],\\n\\xA0 }))\\n\")), mdx(\"h4\", null, \"6. \\u8FD8\\u6CA1\\u5B8C\\u5462\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u4E0A\\u9762\\u51E0\\u4E2A\\u6B65\\u9AA4\\u9879\\u76EE\\u80FD\\u591F\\u7F16\\u8BD1\\uFF0C\\u800C\\u4E14\\u4F60\\u4E5F\\u80FD\\u591F\\u770B\\u5230\\u7F16\\u8BD1\\u901F\\u5EA6\\u6709\\u591A\\u5FEB\\uFF0C\\u4F46\\u662F\\u5B9E\\u9645\\u628A\\u9879\\u76EE\\u8DD1\\u8D77\\u6765\\u624D\\u4F1A\\u53D1\\u73B0\\u62A5\\u9519\\u4E86\\u3002\\u6709\\u70B9\\u5751\\u7684\\u70B9\\u5728\\u4E8E\\u8FD9\\u4E2A remote bundle \\u662F\\u4E00\\u4E2A\\u5F02\\u6B65 chunk\\uFF0C\\u8FD9\\u91CC\\u4ED4\\u7EC6\\u60F3\\u4E2A\\u4E09\\u79D2\\u949F...\"), mdx(\"p\", null, \"Module Federation \\u76EE\\u7684\\u662F\\u5E94\\u7528\\u4E4B\\u95F4\\u7684\\u4E92\\u76F8\\u5F15\\u7528\\uFF0C\\u8FDC\\u7AEF\\u7684\\u6A21\\u5757\\u4E0D\\u80FD\\u4F5C\\u4E3A\\u4E3B\\u5E94\\u7528\\u7684\\u76F4\\u63A5\\u4F9D\\u8D56\\uFF0C\\u5927\\u767D\\u8BDD\\u5C31\\u662F\\uFF0C\\u9700\\u8981\\u7528\\u5230\\u8FDC\\u7AEF\\u6A21\\u5757\\u4E0D\\u80FD\\u662F\\u88AB\\u6253\\u5305\\u5230\\u7ACB\\u5373\\u6267\\u884C\\u7684\\u5165\\u53E3\\u91CC\\u9762\\uFF0C\\u53EA\\u80FD\\u5F02\\u6B65\\u52A0\\u8F7D\\u8FDC\\u7A0B\\u7EC4\\u4EF6\\u540E\\u4F7F\\u7528\\u3002\\u6240\\u4EE5\\u8FD9\\u91CC\\u6211\\u4EEC\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u5FC5\\u987B\\u8981\\u5904\\u7406\\u8FD9\\u4E2A\\u5F02\\u6B65\\u7684\\u70B9\\u3002\\u5B98\\u65B9\\u6587\\u6863\\u4E5F\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E9B \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption\"\n }, \"\\u65B9\\u6CD5\"), \"\\uFF0C\\u6211\\u4EEC\\u91C7\\u7528\\u6700\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u989D\\u5916\\u4E00\\u4E2A bootstrap.js \\u7684\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0Ctaro \\u7684\\u65B9\\u6848\\u4E5F\\u662F\\u8FD9\\u4E2A\\uFF0C\\u7528 VirtualModule \\u505A\\u4E2A\\u5207\\u6362\\uFF0C\\u628A\\u6574\\u4E2A\\u4E3B\\u5E94\\u7528\\u90FD\\u653E\\u5230\\u5F02\\u6B65\\u91CC\\u9762\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"webpackConf.plugins.push(VirtualModule)\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"\\xA0 VirtualModule.apply(compiler);\\n\\xA0 appIndexJs.forEach((entry) => {\\n\\xA0 \\xA0 const { dir, name } = path.parse(entry.path)\\n\\xA0 \\xA0 // remove suffix\\n\\xA0 \\xA0 const filePath = path.join(dir, name)\\n\\xA0 \\xA0 const originCode = fs.readFileSync(entry.path, { encoding: 'utf-8' })\\n\\n const bootPath = `${filePath}.boot.tsx`\\n\\xA0 \\xA0 VirtualModule.writeModule(bootPath, originCode)\\n\\n\\xA0 \\xA0 const code = 'import(\\\"./' + name + '.boot\\\")'\\n \\xA0 VirtualModule.writeModule(entry.path, code)\\n\\xA0 })\\n\")), mdx(\"p\", null, \"\\u5B8C\\u7F8E\\u5B9E\\u73B0\\uFF0C\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u4FEE\\u6539\\u81EA\\u5DF1\\u6E90\\u7801\\u91CC\\u9762\\u7684\\u4E1C\\u897F\\uFF0C\\u4E0D\\u8FC7 Webpack5 \\u548C VirtualModule \\u6709\\u70B9\\u4E0D\\u592A\\u5BF9\\u4ED8\\uFF0C\\u4F1A\\u51FA\\u73B0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/sysgears/webpack-virtual-modules/issues/121\"\n }, \"\\u9996\\u6B21\\u7F16\\u8BD1\\u91CD\\u590D\\u7F16\\u8BD1\"), \"\\u7684\\u95EE\\u9898\\uFF0C\\u867D\\u7136\\u4E0D\\u5F71\\u54CD\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u4E5F\\u5F88\\u5947\\u602A\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/andy0130tw/webpack-virtual-modules/blob/24d823f3133da9f397224cdfedd39be341546b21/src/wfs.ts\"\n }, \"\\u624B\\u52A8 hack \\u4E0B\"), \"\\u4E5F\\u53EF\\u4EE5\\u89E3\\u51B3\\u95EE\\u9898\\u3002\"), mdx(\"h4\", null, \"7. \\u5F00\\u673A\\u6210\\u529F\"), mdx(\"p\", null, \"\\u4E0D\\u51FA\\u610F\\u5916\\uFF0C\\u5E94\\u7528\\u6210\\u529F\\u542F\\u52A8\\u4E86\\uFF0C\\u5B9E\\u9645\\u9879\\u76EE\\u6587\\u4EF6\\u91CC\\u9762\\u4E5F\\u80FD\\u591F\\u6B63\\u786E\\u52A0\\u8F7D\\u6267\\u884C\\u6211\\u4EEC\\u7684\\u8FDC\\u7AEF\\u6A21\\u5757\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/browser-ab7c5193f0c3b6d70988978677b15028.webp\",\n \"alt\": \"页面请求\"\n })), mdx(\"p\", null, \"webpack \\u7684\\u914D\\u7F6E\\u548C\\u5DE5\\u7A0B\\u5316\\u975E\\u5E38\\u590D\\u6742\\uFF0C\\u5982\\u679C\\u4F60\\u5BF9 chunk \\u6216\\u8005 cache \\u6216\\u8005 optimization \\u6216\\u8005 plugin \\u505A\\u4E86\\u592A\\u591A\\u4ECB\\u5165\\u7684\\u8BDD\\uFF0C\\u6709\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u9664\\u4E86\\u8BF4\\u7684\\u8FD9\\u4E9B\\u597D\\u5904\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E9B\\u7EC6\\u8282\\u9700\\u8981\\u5904\\u7406\\uFF1Areact\\u548Creact-dom\\u5FC5\\u987B\\u914D\\u7F6E share\\u3001runtimeChunk \\u914D\\u7F6E\\u9700\\u8981\\u5173\\u95ED\\u3001\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u4E2D\\u4E0D\\u89C4\\u8303\\u5F15\\u7528\\u91CD\\u590D\\u6253\\u5305\\u3001\\u975Ejs\\u7C7B\\u6587\\u4EF6\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u7B49\\u7B49\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u8FD8\\u8981\\u68C0\\u6D4B\\u4F9D\\u8D56\\u53D8\\u66F4\\uFF0C\\u8BA9\\u7F13\\u5B58\\u5931\\u6548\\u91CD\\u65B0\\u7F16\\u8BD1\\u7B49\\u7B49\\u914D\\u5957\\u529F\\u80FD\\uFF0C\\u4E0A\\u9762\\u4EE3\\u7801\\u91CC\\u9762\\u6CA1\\u6709\\u6D89\\u53CA\\uFF0C\\u4E5F\\u4E0D\\u662F\\u672C\\u6587\\u91CD\\u70B9\\u3002\\u3002\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u6280\\u672F\\u65B9\\u6848\\u6BD4\\u8F83\\u7B80\\u964B\\uFF0C\\u800C\\u4E14\\u5F88\\u591A\\u5730\\u65B9\\u6CA1\\u8003\\u8651\\u5230\\u6216\\u8005\\u6709\\u66F4\\u7B80\\u5355\\u65B9\\u6CD5\\uFF0C\\u6BD5\\u7ADF\\u6574\\u4E2A\\u4F9D\\u8D56\\u6253\\u5305\\u4E5F\\u662F\\u975E\\u5E38\\u590D\\u6742\\u7684\\uFF0C\\u4E3B\\u8981\\u5C55\\u793A\\u7684\\u4E5F\\u662F\\u4E2A\\u601D\\u8DEF\\u3002\\u4E0D\\u8FC7\\u6700\\u7EC8\\u7ED3\\u679C\\u8FD8\\u662F\\u597D\\u7684\\uFF0C\\u8282\\u7701\\u4E86\\u5F00\\u53D1\\u73AF\\u5883\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u548C\\u5185\\u5B58\\u3002\\u81F3\\u4E8E\\u5B58\\u5728\\u7684\\u91CD\\u590D\\u6253\\u5305\\u3001\\u4E0D\\u89C4\\u8303\\u4F9D\\u8D56\\u3001\\u90E8\\u5206\\u914D\\u7F6E\\u5931\\u6548\\u3001\\u7F13\\u5B58\\u63A7\\u5236\\u7B49\\u7B49\\uFF0C\\u540E\\u9762\\u6709\\u9700\\u8981\\u518D\\u4F18\\u5316\\u3002\"), mdx(\"p\", null, \"\\u8DD1\\u4E2A\\u5168\\u90E8\\u9879\\u76EE\\uFF0834\\u4E2A entry \\u7684\\u591A\\u5165\\u53E3\\u9879\\u76EE\\uFF09\\uFF0C\\u65E0\\u7F13\\u5B58\\u548C\\u5E26\\u7F13\\u5B58\\u7684\\u7F16\\u8BD1\\u7ED3\\u679C\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/first-386bc2564ae89c98866c3be5e492640e.webp\",\n \"alt\": \"无缓存编译\"\n })), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/second-e052a5bf39e91f8c303a846f006d4b8c.webp\",\n \"alt\": \"无缓存编译\"\n })), mdx(\"h3\", null, \"2.5 \\u66F4\\u597D\\u7684\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u5B9E\\u73B0\\u6B65\\u9AA4\\u662F\\u7B2C\\u4E00\\u7248\\uFF0C\\u540E\\u9762\\u6839\\u636E\\u66F4\\u5927\\u89C6\\u89D2\\u7684\\u601D\\u8003\\uFF0C\\u91C7\\u7528\\u4E86\\u53E6\\u4E00\\u4E2A prebundle \\u7684\\u65B9\\u6848\\uFF0C\\u66F4\\u89C4\\u8303\\u4E5F\\u66F4\\u901A\\u7528\\uFF0C\\u4E0D\\u8FC7\\u9879\\u76EE\\u590D\\u6742\\u5EA6\\u7A0D\\u9AD8\\uFF0C\\u66F4\\u65B9\\u4FBF\\u540E\\u671F\\u4ECE webpack \\u8F6C esbuild \\u65B9\\u6848\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4E00\\u7BC7\\u6587\\u7AE0\\u80FD\\u8BF4\\u5B8C\\u7684\\uFF0C\\u6709\\u65F6\\u95F4\\u518D\\u53E6\\u5F00\\u7CFB\\u5217\\u8BA8\\u8BBA\\u3002\"), mdx(\"p\", null, \"\\u540C\\u65F6\\u4E1A\\u5185\\u4E5F\\u70ED\\u706B\\u671D\\u5929\\u7684\\u628A\\u5DE5\\u5177\\u94FE\\u671D\\u7740 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rust\"), \" \\u65B9\\u5411\\u8F6C\\uFF0C\\u6211\\u5F88\\u770B\\u597D\\uFF0C\\u7B49\\u5927\\u5382\\u6709\\u4E86\\u9636\\u6BB5\\u6027\\u6210\\u679C\\uFF0C\\u6211\\u4E5F\\u5F88\\u613F\\u610F\\u5728\\u8FD9\\u4E2A\\u9879\\u76EE\\u4E2D\\u5C1D\\u8BD5\\u4E00\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6700\\u540E\\u601D\\u8003\"), mdx(\"p\", null, \"esbuild \\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\uFF0C\\u9884\\u7F16\\u8BD1\\u4E4B\\u7C7B\\u7684\\u601D\\u8DEF\\uFF0C\\u8FD9\\u4E9B\\u4E1C\\u897F\\u597D\\u4E0D\\u597D\\u7528\\uFF1F\\u6211\\u53EA\\u80FD\\u8BF4\\u771F\\u9999\\uFF0C\\u4F46\\u662F\\u4F60\\u9879\\u76EE\\u7684\\u81A8\\u80C0\\u901F\\u5EA6\\u548C\\u5F00\\u53D1\\u4F53\\u9A8C\\u51FA\\u73B0\\u95EE\\u9898\\u4E86\\uFF0C\\u8FD9\\u4E9B\\u4E1C\\u897F\\u53EF\\u80FD\\u5E76\\u4E0D\\u662F\\u6838\\u5FC3\\u95EE\\u9898\\uFF0C\\u603B\\u6709\\u66F4\\u597D\\u66F4\\u5FEB\\u7684\\u5F00\\u53D1\\u5DE5\\u5177\\u3002\"), mdx(\"p\", null, \"\\u89C4\\u8303\\u7684\\u5F00\\u53D1\\u3001\\u4E13\\u4E1A\\u7684\\u534F\\u4F5C\\uFF0C\\u5408\\u7406\\u7684\\u9879\\u76EE\\u5206\\u9694\\u3001\\u6070\\u5F53\\u7684\\u5206\\u5305\\u548C\\u5E95\\u5C42\\u5E93\\u63D0\\u53D6\\uFF0C\\u8DB3\\u591F\\u7684\\u5F00\\u53D1\\u5BBD\\u5BB9\\u5EA6\\u548C\\u6280\\u672F\\u503A\\u6E05\\u7406\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u5F00\\u53D1\\u4E2D\\u9700\\u8981\\u91CD\\u89C6\\u7684\\u4E1C\\u897F\\uFF0C\\u4E0D\\u80FD\\u6307\\u671B\\u7740\\u51E0\\u884C\\u4EE3\\u7801\\u80FD\\u89E3\\u51B3\\u4F60\\u9879\\u76EE\\u7684\\u65E0\\u9650\\u81A8\\u80C0\\u3002\"), mdx(\"p\", null, \"\\u5171\\u52C9\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/kvrc/doc2.md","id":"e39d5e0b-deda-5587-933d-d45603d8ebfe","parent":{"name":"doc2","sourceInstanceName":"blog"},"excerpt":"想分享的是一个已经有初步思路的问题，怎么再进一步实现我们的目标形态。 〇、上回书说到 上一篇文章写了实现静态的图像了，不过官方的开源中还包含了一个动画的资源，多达一千多个动画，这篇文章写写怎么实现这个动画。 一、动画文件的参数 先看一个动画的控制数据： 大概能分析有多种类型的控制，以 ms 为单位排布，能控制多种类型： 我们这里关心的就是表情控制和程序表情关键帧，在程序里面被称为：动画片段 (animClip)\n和序列帧动画 (spriteSequence…","fields":{"title":"🤖 机器人眼睛动画的实现 2","slug":"/blog/k-vrc-vector-cozmo-2","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","date":"2021-09-04","redirects":null,"datetime":"2021-09-04 16:34:10","categories":["code"],"series":null,"tags":["整理","思考"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考"],"theme":null,"slug":"k-vrc-vector-cozmo-2","date":"2021-09-04 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"k-vrc-vector-cozmo-2\",\n \"title\": \"🤖 机器人眼睛动画的实现 2\",\n \"date\": \"2021-09-04 16:34:10\",\n \"author\": \"Ubug\",\n \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u4E00\\u4E2A\\u5DF2\\u7ECF\\u6709\\u521D\\u6B65\\u601D\\u8DEF\\u7684\\u95EE\\u9898\\uFF0C\\u600E\\u4E48\\u518D\\u8FDB\\u4E00\\u6B65\\u5B9E\\u73B0\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u5F62\\u6001\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u3007\\u3001\\u4E0A\\u56DE\\u4E66\\u8BF4\\u5230\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u5199\\u4E86\\u5B9E\\u73B0\\u9759\\u6001\\u7684\\u56FE\\u50CF\\u4E86\\uFF0C\\u4E0D\\u8FC7\\u5B98\\u65B9\\u7684\\u5F00\\u6E90\\u4E2D\\u8FD8\\u5305\\u542B\\u4E86\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u8D44\\u6E90\\uFF0C\\u591A\\u8FBE\\u4E00\\u5343\\u591A\\u4E2A\\u52A8\\u753B\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u5199\\u5199\\u600E\\u4E48\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"374px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.40926640926641%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHZEtFJD//EABkQAAIDAQAAAAAAAAAAAAAAAAABAhAREv/aAAgBAQABBQK0+pGH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAABAxAf/aAAgBAQAGPwKqmv8A/8QAGxAAAwACAwAAAAAAAAAAAAAAAAEREDEhYZH/2gAIAQEAAT8he3yRtVNk7eExIJRTD//aAAwDAQACAAMAAAAQx8//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/EErY/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRcfH/2gAIAQEAAT8QoA6HggKJB2Z5Pnh2xTc9qWI4XYhZ/9k=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"anims\",\n \"title\": \"anims\",\n \"src\": \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg\",\n \"srcSet\": [\"/static/55a4f4fadfe744cf40309097b00d7fbd/fca29/anims.jpg 259w\", \"/static/55a4f4fadfe744cf40309097b00d7fbd/11a2a/anims.jpg 374w\"],\n \"sizes\": \"(max-width: 374px) 100vw, 374px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u52A8\\u753B\\u6587\\u4EF6\\u7684\\u53C2\\u6570\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u52A8\\u753B\\u7684\\u63A7\\u5236\\u6570\\u636E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"{\\n \\\"anim_attention_lookatdevice_01\\\": [\\n {\\n \\\"durationTime_ms\\\": 66,\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Name\\\": \\\"LiftHeightKeyFrame\\\",\\n \\\"heightVariability_mm\\\": 0,\\n \\\"height_mm\\\": 32\\n },\\n {\\n \\\"angleVariability_deg\\\": 0,\\n \\\"angle_deg\\\": 0,\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Name\\\": \\\"HeadAngleKeyFrame\\\",\\n \\\"durationTime_ms\\\": 66\\n },\\n {\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"faceScaleY\\\": 0.9664786143465788,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 0.8656703051258197,\\n \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"faceAngle\\\": 0.0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"triggerTime_ms\\\": 0\\n },\\n {\\n \\\"eventGroups\\\": [{\\n \\\"probabilities\\\": [1.0],\\n \\\"audioName\\\": [\\\"Play__Robot_Vic_Sfx__Head_Up_Short\\\"],\\n \\\"eventIds\\\": [2451569527],\\n \\\"volumes\\\": [1.0]\\n }],\\n \\\"triggerTime_ms\\\": 66,\\n \\\"Name\\\": \\\"RobotAudioKeyFrame\\\"\\n },\\n {\\n \\\"Right\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Name\\\": \\\"BackpackLightsKeyFrame\\\",\\n \\\"durationTime_ms\\\": 66,\\n \\\"Back\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Middle\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"Front\\\": [ 0.0, 0.0, 0.0, 0.0],\\n \\\"triggerTime_ms\\\": 0,\\n \\\"Left\\\": [ 0.0, 0.0, 0.0, 0.0\\n ]\\n },\\n {\\n \\\"durationTime_ms\\\": 99,\\n \\\"speed\\\": -2,\\n \\\"triggerTime_ms\\\": 66,\\n \\\"Name\\\": \\\"BodyMotionKeyFrame\\\",\\n \\\"radius_mm\\\": 1\\n }\\n ]\\n}\\n\")), mdx(\"p\", null, \"\\u5927\\u6982\\u80FD\\u5206\\u6790\\u6709\\u591A\\u79CD\\u7C7B\\u578B\\u7684\\u63A7\\u5236\\uFF0C\\u4EE5 ms \\u4E3A\\u5355\\u4F4D\\u6392\\u5E03\\uFF0C\\u80FD\\u63A7\\u5236\\u591A\\u79CD\\u7C7B\\u578B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"FaceAnimationKeyFrame // \\u8868\\u60C5\\u63A7\\u5236\\u5173\\u952E\\u5E27\\nProceduralFaceKeyFrame // \\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\nRobotAudioKeyFrame // \\u58F0\\u97F3\\u5173\\u952E\\u5E27\\nBackpackLightsKeyFrame // \\u80CC\\u90E8\\u706F\\u5149\\u5173\\u952E\\u5E27\\nLiftHeightKeyFrame // \\u624B\\u90E8\\u9AD8\\u5EA6\\u5173\\u952E\\u5E27\\nBodyMotionKeyFrame // \\u8EAB\\u4F53\\u8FD0\\u52A8\\u5173\\u952E\\u5E27\\nHeadAngleKeyFrame // \\u5934\\u90E8\\u89D2\\u5EA6\\u5173\\u952E\\u5E27\\n\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u8FD9\\u91CC\\u5173\\u5FC3\\u7684\\u5C31\\u662F\\u8868\\u60C5\\u63A7\\u5236\\u548C\\u7A0B\\u5E8F\\u8868\\u60C5\\u5173\\u952E\\u5E27\\uFF0C\\u5728\\u7A0B\\u5E8F\\u91CC\\u9762\\u88AB\\u79F0\\u4E3A\\uFF1A\\u52A8\\u753B\\u7247\\u6BB5 (animClip)\\n\\u548C\\u5E8F\\u5217\\u5E27\\u52A8\\u753B (spriteSequence)\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u63A8\\u65AD\\u51FA\\u51C6\\u786E\\u7ED8\\u5236\"), mdx(\"p\", null, \"\\u770B\\u4E0B\\u5173\\u952E\\u5E27\\u7684\\u53C2\\u6570\\uFF0C\\u5C31\\u4F1A\\u53D1\\u73B0\\u548C\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u8BF4\\u7684 pose \\u5E94\\u8BE5\\u662F\\u540C\\u4E00\\u5957\\u6570\\u636E\\uFF0C\\u53EA\\u9700\\u8981\\u7565\\u52A0\\u8F6C\\u6362\\u5C31\\u80FD\\u7528\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"faceScaleY\\\": 0.9664786143465788,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 0.8656703051258197,\\n \\\"leftEye\\\": [ 8.107326060759803, 0.0, 1.72115997174465, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"faceAngle\\\": 0.0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"rightEye\\\": [ -7.315991464547729, 0.0, 1.72115997174465, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1.0, 0.0, 0.0, 0.0, 0],\\n \\\"triggerTime_ms\\\": 0\\n}\\n\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u8FD9\\u4E9B\\u53C2\\u6570\\u7684\\u542B\\u4E49\\u80FD\\u591F\\u5728 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f4d8a545d6db91b0a97bd632d8336f8/cannedAnimLib/proceduralFace/proceduralFace.cpp#L90\"\n }, \"\\u8FD9\\u91CC\"), \" \\u627E\\u5230\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"55.98455598455598%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB1klEQVQoz22S666bMBCE8/5v2J5wvxuwwQZsEuVMZ03Snh9FGoGs9bczu9z23cEvFeyQQndf0CpF1/6OKqtf6PsEE89EI6VYZ3SJzbZYeW+ecoRjALAC3wa38wxYTY+6vKNvMjR1ipLfDb9Xt6BWI0atYZ2Bc5rQOkoNFTY349ivs3lusK4jbo/Hk8U7srxE3XSo6pbOGig1QR5lPNo5QK8e87IhSXPcE1FG9wqTtijbCdqsWNZNgA9Ya5EXJV21BDYEX9J0psyOXhO27tAL6/KczQuCM7qamcJj0A7P5xPCuoXzZJQNRUlg26F+Az8NBNjp4w10PC8ILZASOBFoNw/DRgI7ybod3jOyQ5bl0V1ZVVQdL1R89/OOZj4wLTtmY+O5uPu6JxjHEYtjM70SeF5A7wPc9sMh3YkzeUujcTn+7zC7Itvdx1FEhxJZHDpelKI6zrCOTkXS8QOMDnlRkoiSJCVQwxE4Gcfad2Qfzujk31JqtN3l9APsuWljD26Ro/m7lAu4HYGNHEJ4RxayLCUC2zYuRdwNg8Lr9cJgDi7m4DYP/o9XkuwdWWa40aFhI8+kccs+hOu3+RFZoHJp42zV4iNQHPaTjQ7T7FLX9REmMxSOAP8AcPo6lmU8VKEAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"face keyframe\",\n \"title\": \"face keyframe\",\n \"src\": \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png\",\n \"srcSet\": [\"/static/1b1c15fa4604895405ea1b0d0adaa78d/2c191/face-keyframe.png 259w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/86b01/face-keyframe.png 518w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/0dc48/face-keyframe.png 1035w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/aae66/face-keyframe.png 1553w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/1c66b/face-keyframe.png 2070w\", \"/static/1b1c15fa4604895405ea1b0d0adaa78d/fda45/face-keyframe.png 2092w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u9ED8\\u8BA4\\u503C\\u548C\\u542B\\u4E49\\u90FD\\u662F\\u548C json \\u6587\\u4EF6\\u4E2D\\u7684\\u53C2\\u6570\\u90FD\\u662F\\u4E00\\u4E00\\u5BF9\\u5E94\\u7684\\uFF0C\\u800C\\u4E14\\u63D0\\u4F9B\\u4E86\\u66F4\\u8BE6\\u7EC6\\u7684\\u53C2\\u6570\\u7C7B\\u578B\\u548C\\u8BA1\\u7B97\\u65B9\\u6CD5\\uFF0C\\u6BD4\\u5982\\u773C\\u775B\\u7684\\u4F4D\\u7F6E\\u662F\\u548C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u53C2\\u6570\\u4F4D\\u7F6E\\u76F8\\u52A0\\u7684\\u503C\\uFF0C\\u8303\\u56F4\\u5728\\u5BBD\\u5EA6\\u7684\\u4E00\\u534A\\u4E4B\\u95F4\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// \\u6BD4\\u5982\\ndrawEyeX = neutralEyeX + [\\u914D\\u7F6E\\u7684\\u53C2\\u6570]\\n\")), mdx(\"p\", null, \"\\u800C\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u5728 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/digital-dream-labs/vector/blob/7a2761097f/animProcess/src/cozmoAnim/animation/animationStreamer.cpp#L404\"\n }, \"\\u8FD9\\u91CC\"), \" \\u53EF\\u4EE5\\u627E\\u5230\\u540D\\u79F0\\uFF1A\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"25.86872586872587%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABYlAAAWJQFJUiTwAAABBklEQVQY0y2PCW6DMBQFuf/9qmxNs0GaAN4XbCBMDaql0XvWt0d2pbVkzjfuvwfuzY5Xe8Lbb5z6wpsDUqzs0eqAKajSRb8j2CNTujIOly2nkst4ozLWMc/Q1JKfuuf6lLS95lE/OV8bjnfBqTZcyvz8EOwvHbenRppIJz3v3hXstv98oFLGwmdG9z2vTtF3Le37Tdd11E1TLhlsnHAh4WJGuowbZmLKDDEQo8dazTSNrKty3rMsC8kFtAmEmFDaIqRGCIkxRVh+4ZwjhDIPvnRbRAE/TJvcxJkh/Qt9ObQKnR8QOqJcyfL8VkWEMkVu6FTAWE8eR3IeSTkzrn2cN1JhmuZN+AcDXn2II/BasgAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"neutral face\",\n \"title\": \"neutral face\",\n \"src\": \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png\",\n \"srcSet\": [\"/static/72e316ec0f89368392081a02d1b47b88/2c191/neutral-face.png 259w\", \"/static/72e316ec0f89368392081a02d1b47b88/86b01/neutral-face.png 518w\", \"/static/72e316ec0f89368392081a02d1b47b88/0dc48/neutral-face.png 1035w\", \"/static/72e316ec0f89368392081a02d1b47b88/aae66/neutral-face.png 1553w\", \"/static/72e316ec0f89368392081a02d1b47b88/02a99/neutral-face.png 1582w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u7FFB\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\u5939\\u627E\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"anim_neutral_eyes_01\"), \" \\u62FF\\u5230\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"Name\\\": \\\"ProceduralFaceKeyFrame\\\",\\n \\\"triggerTime_ms\\\": 0,\\n \\\"durationTime_ms\\\": 0,\\n \\\"scanlineOpacity\\\": 1.0,\\n \\\"faceScaleX\\\": 1.0,\\n \\\"faceScaleY\\\": 1.0,\\n \\\"faceCenterX\\\": 0.0,\\n \\\"faceCenterY\\\": 0.0,\\n \\\"faceAngle\\\": 0.0,\\n \\\"leftEye\\\": [8.107326060759803, 0.0, 1.5174507300664741, 1.1453089027930028, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0],\\n \\\"rightEye\\\": [-7.315991464547729, 0.0, 1.5174507300664741, 1.144941064931666, 0.0, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0]\\n}\\n\")), mdx(\"p\", null, \"\\u6BD4\\u7167\\u7740\\u4E0A\\u9762\\u7684\\u53C2\\u6570\\u542B\\u4E49\\uFF0C\\u52A0\\u4E0A\\u4E00\\u70B9\\u70B9\\u7684\\u7FFB\\u770B\\u6E90\\u7801\\uFF0C\\u6211\\u4EEC\\u80FD\\u591F\\u77E5\\u9053\\u9ED8\\u8BA4\\u7684\\u8868\\u60C5\\u4E0B\\u7684\\u5404\\u4E2A\\u53C2\\u6570\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u6574\\u4E2A\\u9762\\u90E8\\u5C3A\\u5BF8\\nFACE_DISPLAY_WIDTH = 184\\nFACE_DISPLAY_HEIGHT = 96\\n// \\u5355\\u4E2A\\u773C\\u775B\\u5927\\u5C0F\\nNominalEyeHeight = 57\\nNominalEyeWidth = 43\\n// \\u4E24\\u4E2A\\u773C\\u775B\\u95F4\\u8DDD\\u5927\\u5C0F\\nkProcFace_NominalEyeSpacing = 92\\n\\n// \\u6839\\u636E\\u95F4\\u8DDD\\u8BA1\\u7B97\\u4E24\\u4E2A\\u773C\\u775B\\u7684\\u7EDD\\u5BF9\\u4F4D\\u7F6E\\nconst NominalLeftEyeX = (FACE_DISPLAY_WIDTH - kProcFace_NominalEyeSpacing) / 2;\\nconst NominalRightEyeX = NominalLeftEyeX + kProcFace_NominalEyeSpacing;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5927\\u81F4\\u80FD\\u770B\\u51FA\\u6765\\u52A8\\u753B Clip \\u7684\\u5B9E\\u73B0\\u624D\\u662F\\u6574\\u4E2A\\u8868\\u60C5\\u7684\\u6838\\u5FC3\\uFF0C\\u4E4B\\u524D\\u7684 POSE \\u7684\\u5B9E\\u73B0\\u4E5F\\u662F\\u6765\\u81EA\\u4E8E\\u6B64\\u3002\")), mdx(\"p\", null, \"\\u6709\\u4E86\\u8FD9\\u4E9B\\u53C2\\u6570\\uFF0C\\u6E90\\u7801\\u91CC\\u9762\\u4E5F\\u6709\\u5176\\u4ED6\\u5706\\u89D2\\u7684\\u5B9E\\u73B0\\uFF0C\\u8FD9\\u91CC\\u6211\\u4EEC\\u5C31\\u53EF\\u4EE5\\u91CD\\u6784\\u51FA\\u4E00\\u7248\\u51C6\\u786E\\u7ED8\\u5236\\u7684\\u5B9E\\u73B0\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"drawFace = (\\n ctrls: EyesControls,\\n blink: BlinkParams = { x: 1, y: 1 },\\n) {\\n // \\u6E05\\u7A7A\\u753B\\u5E03\\n this.scope.project.clear();\\n\\n // \\u65B0\\u5EFA\\u56FE\\u5C42\\n new this.scope.Layer();\\n // \\u521B\\u5EFA\\u65B0\\u7684\\u77E9\\u5F62\\u4EE5\\u4FBF\\u7ED8\\u5236\\u6837\\u5F0F\\n const rect = new this.scope.Rectangle(\\n FACE_DISPLAY_WIDTH,\\n FACE_DISPLAY_HEIGHT\\n );\\n new this.scope.Path.Rectangle(rect);\\n\\n // \\u65B0\\u5EFA\\u56FE\\u5C42\\n const activeLayer = new this.scope.Layer();\\n\\n // \\u7ED8\\u5236\\u4E24\\u4E2A\\u773C\\u7684\\u5F62\\u72B6\\n this.genEyeShape(ctrls.left, blink);\\n this.genEyeShape(ctrls.right, blink);\\n\\n // \\u65BD\\u52A0\\u7F29\\u653E\\u3001\\u65CB\\u8F6C\\u548C\\u53D8\\u5F62\\u7684\\u64CD\\u4F5C\\n activeLayer.scale(ctrls.FaceScaleX, ctrls.FaceScaleY);\\n activeLayer.rotate(ctrls.FaceAngle);\\n activeLayer.translate(...);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"genEyeShape(ctrl: EyeControls, blink: BlinkParams = { x: 1, y: 1 }) {\\n // ... \\u83B7\\u53D6\\u57FA\\u672C\\u53C2\\u6570\\n\\n // ========== \\u773C\\u7751\\n const newLidClip = new this.scope.Path();\\n const lidFix = new this.scope.Point(EyeCenterX - halfEyeWidth, EyeCenterY - halfEyeHeight);\\n\\n const upperYAdj = halfEyeWidth * Math.tan((Math.PI / 180) * UpperLidAngle);\\n const upperYRad = -UpperLidBend * eyeHeight;\\n const upperY = -UpperLidY * eyeHeight;\\n newLidClip.add(new this.scope.Point(-1, upperY - upperYAdj).add(lidFix));\\n newLidClip.quadraticCurveTo(\\n new this.scope.Point(halfEyeWidth, upperYRad).add(lidFix),\\n new this.scope.Point(eyeWidth + 1, upperY + upperYAdj).add(lidFix)\\n );\\n\\n //...\\u4E0B\\u773C\\u7751\\n\\n // ========== \\u773C\\u89D2\\n const eyeSize = [halfEyeWidth, halfEyeHeight];\\n const cornerCalc = (v: number[]) => v.map((v, i) => v * eyeSize[i]);\\n\\n let cornerOT = cornerCalc([ctrl.UpperOuterRadiusX, ctrl.UpperOuterRadiusY]);\\n let cornerIT = cornerCalc([ctrl.UpperInnerRadiusX, ctrl.UpperInnerRadiusY]);\\n let cornerIB = cornerCalc([ctrl.LowerInnerRadiusX, ctrl.LowerInnerRadiusY]);\\n let cornerOB = cornerCalc([ctrl.LowerOuterRadiusX, ctrl.LowerOuterRadiusY]);\\n\\n const newEye = new this.scope.Path();\\n\\n // \\u5DE6\\u4E0A\\u5706\\u89D2\\uFF0C\\u4ECE\\u5DE6\\u8FB9\\u753B\\u5706\\u5F27\\u5230\\u4E0A\\u8FB9\\n newEye.add(new this.scope.Point(0, cornerOT[1]));\\n newEye.quadraticCurveTo(\\n new this.scope.Point(0, 0),\\n new this.scope.Point(cornerOT[0], 0)\\n );\\n\\n //... \\u5176\\u4ED6\\u7684\\u5706\\u89D2\\n\\n newEye.closed = true;\\n newEye.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n // ====================== \\u773C\\u775B\\u548C\\u773C\\u7751\\u7684\\u4EA4\\u96C6\\n const eyeIntersect = newLidClip.intersect(newEye, { insert: true });\\n\\n // \\u83B7\\u53D6\\u4EA4\\u96C6\\u4E4B\\u540E\\uFF0C\\u4E4B\\u524D\\u7684\\u5F62\\u72B6\\u5220\\u9664\\n newLidClip.remove();\\n newEye.remove();\\n\\n // ====================== \\u773C\\u775B\\u7684\\u53D8\\u6362\\n eyeIntersect.scale(\\n ctrl.EyeScaleX * (blink.x || 1),\\n ctrl.EyeScaleY * (blink.y || 1)\\n );\\n eyeIntersect.rotate(-ctrl.EyeAngle);\\n\\n // ====================== \\u77B3\\u5B54\\n const pupil = new this.scope.Path.Circle(\\n new this.scope.Point(\\n ctrl.HotSpotCenterX * halfEyeWidth + halfEyeWidth,\\n -ctrl.HotSpotCenterY * halfEyeWidth + halfEyeHeight\\n ),\\n this.globalConf.pupilSize / 2\\n );\\n pupil.position = new this.scope.Point(ctrl.EyeCenterX, ctrl.EyeCenterY);\\n\\n // ====================== \\u77B3\\u5B54\\u4E0E\\u773C\\u775B\\u7684\\u4EA4\\u96C6\\n const pupilCliper = eyeIntersect.clone();\\n const pupilIntersect = pupilCliper.intersect(pupil, { insert: true });\\n\\n pupil.remove();\\n pupilCliper.remove();\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u662F\\u6838\\u5FC3\\u7684\\u7ED8\\u5236\\u90E8\\u5206\\uFF08\\u53BB\\u6389\\u4E86\\u975E\\u6838\\u5FC3\\u7684\\u6837\\u5F0F\\u4E4B\\u7C7B\\u7684\\uFF09\\uFF0C\\u6700\\u540E\\u80FD\\u83B7\\u5F97\\u6211\\u4EEC\\u60F3\\u8981\\u7684\\u5B98\\u65B9\\u7684\\u7ED8\\u5236\\u903B\\u8F91\\uFF0C\\u66F4\\u597D\\u7684\\u662F\\u6211\\u4EEC\\u8FD9\\u662F\\u77E2\\u91CF\\u7684\\u7ED8\\u5236\\uFF0C\\u53EF\\u4EE5\\u505A\\u66F4\\u597D\\u73A9\\u7684\\u6548\\u679C\\uFF0C\\u6BD4\\u5982\\u63CF\\u8FB9\\u800C\\u4E0D\\u662F\\u586B\\u5145\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"378px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"50.965250965250966%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABoklEQVQoz62S3VLCMBCFN0lbAggUWiiggCBq/UOh4OgzcAHM8PcmPAXPfNykTEGvvdjJZpN8OWcTOh6PmM/n2O332Gy2HBsb6/U6y//G37XtbofFYoHD4QAyMCL6l4jjGLRjupnkHl/g3D9BNSJIrSG5pjjsKASUlL9qUimosAGn24f3+mEZs9kUtF6t7MR5eQf5NYjhI9zxDO70G9QdgKIWKKdBDCUGUPsG6mMKb/oF+fAMCupQ8SuoWEIyGjFwuQRJBw6DDNjLa3jlMnJhHW6nx9A+BB8Qb2PQMIZioG624Jo9pSt7RjbboGqA5N0AVwwULJ/tmsV8FGU90b5vR3F7B2kUGyeOglsspm0KQkhWLo2LWv0CKBl4UmhvrlahgwCqUEiBvQHE+NNaF9w7HYbw+LJctXahMLxUKOGYPpyUSSkgLl5PDB7Y8gSk81lNMTjL2QGV/bSH5h9ZK88jCGO7dQ1qnoJzwY8luG9UrqQq2x2u89yo4tGoV6PEMpLJ5Ay0N9ZCUKMFEaVhcqr4579W4EdoNLN1u4dfXnpeCkwS/ADR9/+DiwcPFwAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"line style\",\n \"title\": \"line style\",\n \"src\": \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png\",\n \"srcSet\": [\"/static/3404b4ec61e3679a7a9bf3888d8804fd/2c191/line-style.png 259w\", \"/static/3404b4ec61e3679a7a9bf3888d8804fd/15df2/line-style.png 378w\"],\n \"sizes\": \"(max-width: 378px) 100vw, 378px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"ps: \\u7ED8\\u5236\\u8F6C\\u4E3A\\u77E2\\u91CF svg \\u7684\\u65F6\\u5019\\uFF0C\\u60F3\\u8981\\u4E24\\u4E2A\\u8DEF\\u5F84\\u7684\\u4EA4\\u96C6\\u4F46\\u662F\\u8BA1\\u7B97\\u4F1A\\u5F88\\u590D\\u6742\\uFF0C\\u7B80\\u5355\\u67E5\\u8BE2\\u540E\\u53D1\\u73B0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://paperjs.org/\"\n }, \"paper.js\"), \" \\u5F88\\u5F3A\\u5927\\uFF0C\\u5904\\u7406 svg \\u4EA4\\u96C6\\u5F88\\u65B9\\u4FBF\\uFF0C\\u6700\\u540E\\u5B9E\\u73B0\\u6548\\u679C\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u5BF9\\u4E1A\\u52A1\\u7684\\u542F\\u793A\\uFF1A\\u968F\\u7740\\u8C03\\u7814\\u548C\\u5B9E\\u73B0\\u7684\\u6DF1\\u5165\\uFF0C\\u4E1A\\u52A1\\u7EC6\\u8282\\u7684\\u4E86\\u89E3\\uFF0C\\u627E\\u5230\\u4E86\\u76F8\\u5BF9\\u66F4\\u597D\\u7684\\u5207\\u5165\\u70B9\\uFF0C\\u6240\\u4EE5\\u91CD\\u6784\\u4E5F\\u662F\\u4E3A\\u4E86\\u66F4\\u597D\\u7684\\u5B9E\\u73B0\\u4E1A\\u52A1\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u66F4\\u9AD8\\u7EA7\\u7684\\u6269\\u5C55\\u3002\")), mdx(\"h2\", null, \"\\u4E09\\u3001\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u4E00\\u8282\\u867D\\u7136\\u662F\\u5728\\u7814\\u7A76\\u52A8\\u753B\\u7247\\u6BB5\\uFF0C\\u4F46\\u662F\\u66F4\\u591A\\u7684\\u662F\\u6839\\u636E\\u52A8\\u753B\\u7247\\u6BB5\\u7684\\u53C2\\u6570\\u91CD\\u6784\\u7ED8\\u5236\\u903B\\u8F91\\u3002\\u4E0B\\u9762\\u5C42\\u7231\\u662F\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u518D\\u6DF1\\u5165\\u8C03\\u7814\\u4E0B\\u52A8\\u753B\\u6587\\u4EF6\\uFF0C\\u80FD\\u591F\\u5F97\\u51FA\\u51E0\\u4E2A\\u7ED3\\u8BBA\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"triggerTime_ms \\u662F\\u52A8\\u753B\\u7684\\u65F6\\u95F4\\u4FE1\\u606F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5173\\u952E\\u5E27\\u662F\\u4E00\\u5957\\u8868\\u60C5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728\\u89C4\\u5B9A\\u7684\\u65F6\\u95F4\\u7ED8\\u5236\\u8FD9\\u4E2A\\u8868\\u60C5\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7ED8\\u5236\\u65F6\\u95F4\\u90FD\\u662F 33 \\u7684\\u500D\\u6570\\uFF0C\\u4E5F\\u5C31\\u662F 30 fps \\u7684\\u52A8\\u753B\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u505A\\u4E00\\u4E2A\\u65F6\\u95F4\\u7BA1\\u7406\\u5668\\uFF0C30fps \\u7684\\u5E27\\u7387\\u8C03\\u7528\\u7ED8\\u5236\\uFF0C\\u5728\\u76F8\\u5E94\\u7684\\u89E6\\u53D1\\u65F6\\u95F4\\u89E6\\u53D1\\u5BF9\\u5E94\\u7684\\u7ED8\\u5236\\u5C31\\u5B9E\\u73B0\\u4E86\\u52A8\\u753B\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5148\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u7684 FPS \\u65F6\\u95F4\\u63A7\\u5236\\u5668\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"import { getUUID } from \\\"./uuid\\\";\\n\\nexport class Ticker {\\n constructor(){\\n this.fps = 30\\n\\n this.then = Date.now()\\n this.interval = 1000 / this.fps;\\n this.globalFrame = 0\\n }\\n runner: number = -1\\n drawers: { [i: string]: () => void } = {}\\n\\n registDrawers = (func: () => void, name?: string): () => void => {\\n const uid = name || getUUID()\\n this.drawers[uid] = func\\n\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n\\n return () => {\\n if (this.drawers[uid]) delete this.drawers[uid]\\n }\\n }\\n\\n afterOneFrame = (func: () => void) => {\\n const uid = getUUID()\\n this.drawers[uid] = () => {\\n func()\\n if (this.drawers[uid]) delete this.drawers[uid]\\n }\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n }\\n\\n pause() {\\n if (this.runner) cancelAnimationFrame(this.runner)\\n }\\n stop(){\\n if (this.runner) cancelAnimationFrame(this.runner)\\n for (const key in this.drawers) {\\n if (Object.prototype.hasOwnProperty.call(this.drawers, key)) {\\n delete this.drawers[key];\\n }\\n }\\n }\\n resume() {\\n if (this.runner) cancelAnimationFrame(this.runner)\\n this.globalTick();\\n }\\n realFPS = 30\\n fps = 30\\n then = Date.now()\\n interval;\\n globalFrame = 0\\n globalTick = () => {\\n let now = Date.now();\\n let delta = now - this.then;\\n if (delta > this.interval) {\\n this.realFPS = 1000 / delta\\n this.globalFrame++\\n this.then = now - (delta % this.interval);\\n\\n for (const key in this.drawers)\\n if (Object.prototype.hasOwnProperty.call(this.drawers, key))\\n this.drawers[key]()\\n }\\n this.runner = requestAnimationFrame(this.globalTick);\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u4E5F\\u80FD\\u627E\\u5230\\u73B0\\u6210\\u7684\\u9879\\u76EE\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u5C31\\u662F\\u6839\\u636E FPS \\u63A7\\u5236\\u6BCF\\u4E00\\u5E27\\u7684\\u8FD0\\u884C\\u65F6\\u673A\\uFF0C\\u7136\\u540E\\u589E\\u52A0\\u4E00\\u5806\\u8F85\\u52A9\\u673A\\u5236\\u5E2E\\u52A9\\u8FD0\\u884C\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u5C31\\u662F\\u904D\\u5386\\u5173\\u952E\\u5E27\\u6309\\u7167\\u987A\\u5E8F\\u6267\\u884C\\u7ED8\\u5236\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u540E\\u7EED\\u8FD8\\u6DFB\\u52A0\\u4E86\\u5E8F\\u5217\\u5E27\\u3001\\u4E8B\\u4EF6\\u7B49\\u903B\\u8F91\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E0D\\u662F\\u6700\\u7EC8\\u7248\\uFF01\\uFF01\\uFF01\\u53EA\\u662F\\u793A\\u610F\\nrunAniKeyFrames(keyframes: AniKeyFrame[]) {\\n // \\u8BA1\\u7B97\\u603B\\u5E27\\u6570\\uFF08\\u5305\\u62EC\\u5173\\u952E\\u5E27\\u548C\\u5E8F\\u5217\\u5E27\\uFF09\\n let totalFrames = -Infinity;\\n keyframes.forEach((keyframe) => {\\n if (keyframe.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n totalFrames = Math.max(\\n totalFrames,\\n msToFrame(keyframe.triggerTime_ms + keyframe.durationTime_ms)\\n );\\n }\\n });\\n\\n // \\u5E27\\u6570\\u5FAA\\u73AF\\u4F53\\n const runFrame = (frameIndex: number) => {\\n // \\u67E5\\u627E\\u5173\\u952E\\u5E27\\u4E2D\\u662F\\u5426\\u6709\\u7B26\\u5408\\u65F6\\u95F4\\u7684\\u5E27\\n const matchFrames = keyframes.filter((frame) =>\\n msIsFrame(frame.triggerTime_ms, frameIndex)\\n );\\n // \\u5982\\u679C\\u6709\\uFF0C\\u90A3\\u4E48\\u64AD\\u653E\\u8FD9\\u4E9B\\u5E27\\n if (matchFrames.length > 0) {\\n matchFrames.forEach((frame) => {\\n if (frame.Name === \\\"ProceduralFaceKeyFrame\\\") {\\n // \\u63A7\\u5236\\u53C2\\u6570\\u7684\\u5E27\\n const controls = applyKeyFrameOnControls(frame, this.globalConf);\\n this.applyControls(controls, undefined, \\\"frame\\\");\\n }\\n });\\n }\\n if (frameIndex >= totalFrames) dispose();\\n };\\n\\n // \\u5F00\\u59CB\\u5FAA\\u73AF\\n let globalFrameSave = this.ticker.globalFrame;\\n dispose = this.ticker.registDrawers(() => {\\n runFrame(this.ticker.globalFrame - globalFrameSave);\\n });\\n runFrame(0);\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u7684\\u8BDD\\u5C31\\u5B9E\\u73B0\\u4E86\\u6700\\u57FA\\u672C\\u7684\\u5173\\u952E\\u5E27\\u64AD\\u653E\\u4E86\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/ani-5939318b6d5ca5a5441e632d4dffcba2.mp4\"\n }), mdx(\"h3\", null, \"\\u56DB\\u3001\\u5E8F\\u5217\\u5E27\\u52A8\\u753B\"), mdx(\"p\", null, \"\\u5E8F\\u5217\\u5E27\\u76F8\\u6BD4\\u4E4B\\u4E0B\\u66F4\\u7B80\\u5355\\uFF0C\\u56E0\\u4E3A\\u5E8F\\u5217\\u5E27\\u7684\\u52A8\\u753B\\u662F\\u9884\\u8BBE\\u597D\\u7684\\u4E00\\u5E27\\u5E27\\u7684\\u753B\\u9762\\uFF0C\\u53EA\\u8981\\u6BCF\\u4E00\\u5E27\\u5C55\\u793A\\u4E00\\u4E0B\\u52A8\\u753B\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, mdx(\"span\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"64.86486486486486%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC70lEQVQ4y5WSS0yUVxTHrxttYkw0aSUhxriwRmtqdIMkbizu0EA0atr6TFu7aDfF7psYUkWRqoAxkkI0hYlWJOKDD5RShJgiTJrGARSZGTMvlIFx3t9jHvx677UuTLrxJCfnfOfe///733OOyCYy2GmLxFycmUCE0Isg/ud+nZvJLPHoax3VvVehlzq+lrW8mSM5nyAVS5KNp7FSps5FPpfHtmysrEU2LYHpjI5m1sQyLXnm4EhXuWM7FJw8FIrknZys29imrTGZVAYzYyJ4T4slEjT+fot/nniYmBjH7Xbz9NlTotEoSXkmUqkUl39tpfH8eZouXKC+7hRX29owDIMzZ+vpGxzk+s0uamtr8Xg8mnQ6ECSVThObnycej5PL5XS9KF3Mzs2xdPkKhBAsq9hFSdVBlm7YzAcff0Lpge/59IcTrNt/WJ+fPn1GA8PB4DuqLUu2yzR5GcsiwjMzrCot5bPvjrPrSg/HukfYXtdCec1PHOoc5ktXP5WN7YjFS/iloUETeL1eTEmwsLDwRvH0tK5FwmFEdD5GWXk5q6u+4Ktr/XzbYbC7ycXeukscae/lG1cfFQ1XtcJz/xGGJTAh+1UsFrUXCgWSySSRSASRlBPaurWM0h072dfRR40xxoYff6ak+gDVHX9Q2XqXqqbfWP7hR5w6eVITzs7OaiKl8K1K1Ue/348IBkOsLClh99Gv2bjvMOv3HGTlljJWbdzE2urPWVO5l9Xl2xCLFtHc3KzBoVBIK1Kmnq5+MCdnoaLIS7mqjz6fD68c/9T4E3xTz/DKvkzLtfBOjuN7PsWLQIB0JoPaioDMlUI9WRmVOuXq6e+9h0UJSsuVUeD/M9E7MsbQ4zHuDAwy7P6bnj8fMvDXKEOjbnqGHjEs4/0R6YMPaeu6TTAU1kDHcbQ6tTLKbNvW3+Jyt8H1e71cvHaTroEhWjtv4TIecKOvn5bObm4Y92m9bdDS7qKmvhHPxCSFfF4/XQ3k7fpkZDsU4b9NsmdJilh3cAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"sprites\",\n \"title\": \"sprites\",\n \"src\": \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png\",\n \"srcSet\": [\"/static/fa9d90baedd117ca41233bea56268455/2c191/sprites.png 259w\", \"/static/fa9d90baedd117ca41233bea56268455/86b01/sprites.png 518w\", \"/static/fa9d90baedd117ca41233bea56268455/0dc48/sprites.png 1035w\", \"/static/fa9d90baedd117ca41233bea56268455/09c70/sprites.png 1290w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\u8FD9\\u4E9B\\u56FE\\u7247\\u5FC5\\u987B\\u63D0\\u524D\\u52A0\\u8F7D\\uFF0C\\u5426\\u5219\\u4E00\\u5E27\\u7684\\u65F6\\u95F4\\u91CC\\u9762\\u52A0\\u8F7D\\u4F1A\\u51FA\\u73B0\\u95EA\\u73B0\\u7684\\u60C5\\u51B5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u6839\\u636E url \\u52A0\\u8F7D\\u4E3A DataUrl\\uFF0C\\u8FD9\\u6837\\u7684\\u8BDD\\u663E\\u793A\\u8017\\u65F6\\u4E0D\\u9700\\u8981\\u7B49\\u5F85\\u7F51\\u7EDC\\nconst loadSpritesByName = async (name: string) => {\\n if (spritesCache[name]) return spritesCache[name];\\n\\n const sprite = sprites.find(s => s.name === name)\\n if (sprite) {\\n const asyncList = new Array(sprite.count).fill(0).map(async (v, i) => fetchAsDataURL(getSpriteUrl(sprite, i)))\\n spritesCache[sprite.name] = await Promise.all(asyncList)\\n return spritesCache[sprite.name]\\n }\\n return null\\n}\\n\")), mdx(\"p\", null, \"\\u7ED8\\u5236\\u56FE\\u50CF\\u7684\\u64CD\\u4F5C\\u5C31\\u4E0D\\u8D34\\u4E86\\uFF0C\\u76F4\\u63A5\\u5C55\\u793A\\u7ED3\\u679C\\uFF1A\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/snow-cd94b2b6d8ff9a00c89eb11603ac3d57.mp4\"\n }), mdx(\"h3\", null, \"\\u5B8C\\u7ED3\"), mdx(\"video\", {\n controls: true,\n style: {\n maxWidth: '100%'\n },\n src: \"/all-5a5ad555506a9b397998f817cf2bd8d3.mp4\"\n }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.ubug.io/k_vrc\"\n }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}